asp.net ajax的简单例子

最新推荐文章于 2021-08-05 13:14:47 发布

lidoublewen

最新推荐文章于 2021-08-05 13:14:47 发布

阅读量1k

点赞数

分类专栏： ajax 文章标签： asp.net ajax string javascript function xmlhttprequest

本文链接：https://blog.csdn.net/lidoublewen/article/details/4438920

版权

ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这段代码实现了根据两个select（modelYear，make）框的内容动态的内容显示第三个select的内容，实现页面的局部刷新。

一.前台：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
</head>
<script type ="text/javascript">
var xmlhttp ;
function createXMLHttpRequest()
{
    if(window.ActiveXObject)
    {
       xmlhttp =new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest)
    {
        xmlhttp = new XMLHttpRequest();
    }
}

function refreshModelList()
{
    var make = document.getElementById("make").value;
    alert(make);
    var modelYear = document.getElementById("modelYear").value;
    if(make==""||modelYear=="")
    {
       clearModelsList();
       return;
    }
   var url ="Default3.aspx?"+createQueryString(make,modelYear)+"&ts="+new Date().getTime();
   createXMLHttpRequest();
   xmlhttp.onreadystatechange = handleStateChange;
   xmlhttp.open("get",url,true);
   xmlhttp.send(null);
}

function createQueryString(make,modelYear)
{
var queryString ="make="+make+"&modelYear="+modelYear;
return queryString;
}

function handleStateChange()
{
    if(xmlhttp.readyState == 4)
    {
       if(xmlhttp.status == 200)
       {
          updateModelsList();
       }
    }
}

function updateModelsList()
{

clearModelsList();

var models = document.getElementById("models");

var xml = xmlhttp.responseXML;
var results = xmlhttp.responseXML.getElementsByTagName("model");
var option = null;

for(var i = 0;i<results.length;i++)
{
    option = document.createElement("option");
    option.appendChild(document.createTextNode(results[i].firstChild.nodeValue));
    models.appendChild(option);

}

}

function clearModelsList()
{
    var models =document.getElementById("models");

    while(models.childNodes.length>0)
    {
      models.removeChild(models.childNodes[0]);
    }

}
</script>
<body>

    <form id="form1" runat="server" action ="#" >
    <select id ="modelYear" onchange = "refreshModelList();" >
    <option value ="">select one</option>
    <option value="2006">2006</option>
    <option value="1995">1995</option>
    <option value="1985">1985</option>
    <option value="1975">1975</option>
    </select>
    <br /><br />
    <select id ="make" onchange = "refreshModelList();">
    <option value ="">select one</option>
    <option value="BMW">BMW</option>
    <option value="TOYOTA">TOYOTA</option>
    <option value="BENZ">BENZ</option>
    </select>
    <br /><br />
    <select id ="models">

    </select>
    <input type ="text" id ="text" runat="server" />
    <br /><br />
    <input type ="file" />
    </form>
</body>
</html>

在前台的JavaScript脚步中

1.首先要创建一个XMLhttp对象,函数createXMLHttpRequest()初始化了XMLhttp对象；

2.xmlhttp向页面default3发送请求，并带有几个参数（make，modelYear，dateTime），回调函数为handleStateChange（）；

3.handleStateChange（）函数里检查xmlhttp对象的有效状态，如果请求返回就更新model下拉框的内容；

4.updateModelsList()实现了读取返回xml文件，并将读取的信息在model下拉框中显示。

二.后台：

在default3（注意这是另外一个页面，而不是上面嵌入有JavaScript脚步的default2页面了，因为我发现如果在default2页面的后台生成xml文件的话，当xmlhttp发出请求后，返回浏览器的页面是xml文本，前台的JavaScript无法处理返回的xml文件，如果读者有什么好办法的话就留下言吧，谢谢）后台生成xml文件:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Default3 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string make = Request["make"];
        string modelYear = Request["modelYear"];
        ArrayList availableList = new ArrayList();
        string[] str1 = new string[] { "1995", "BMW", "FDAD" };
        string[] str2 = new string[] { "1995", "BMW", "ssddD" };
        string[] str3 = new string[] { "1995", "TOYOTA", "F1323" };
        string[] str4 = new string[] { "1992", "TOYOTA", "F22322867D" };

        availableList.Add(str1);
        availableList.Add(str2);
        availableList.Add(str3);
        availableList.Add(str4);
        string results = "<models>";

        /根据传入参数make以及modelYear的值产生要返回的xml文件的内容
        for (int i = 0; i < availableList.Count; i++)
        {
            if ((((string[])availableList[i])[0]) == modelYear)
            {
                if ((((string[])availableList[i])[1]) == make)
                {
                    results += "<model>";
                    results += ((string[])availableList[i])[2];
                    results += "</model>";
                }
            }
        }
        results += "</models>";
        Response.ContentType = "text/xml";
        Response.Clear();
        Response.Write("<?xml version=/"1.0/" encoding=/"utf-8/" ?>");
        Response.Write(results);
        Response.End();
     }
}

其实这个例子很简单，就是调试的时候遇到了很大的问题，在vs下很难对JavaScript脚步发生的错误进行调试。特别是url后面的那些参数

var queryString ="make ="+make+"&modelYear="+modelYear; 因为make跟=号之间多了一个空格就搞了我一个上午。。。细心。。。

lidoublewen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
asp.net ajax的简单例子

这段代码实现了根据两个select（modelYear，make）框的内容动态的内容显示第三个select的内容，实现页面的局部刷新。一.前台：Default2.aspx.cs" Inherits="Default2" %>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1
复制链接

扫一扫

专栏目录