Ajax 实现局部刷新、无刷新

最新推荐文章于 2022-04-25 20:15:10 发布

xBoady

最新推荐文章于 2022-04-25 20:15:10 发布

阅读量1.5k

点赞数

分类专栏： Ajax应用文章标签： Ajax实现省市级别效果 Ajax局部刷新 Ajax简单示例实现Ajax无刷新

本文链接：https://blog.csdn.net/xiaolongit/article/details/8445738

版权

Ajax应用专栏收录该内容

1 篇文章 0 订阅

订阅专栏

page1.aspx前台代码：

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

<!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>
    <script type="text/javascript">
      var xmlHttp;
      var xml_post_get;

      function CreateXmlHttp()
      {
        if(window.ActiveXObject)
        {
          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
          xml_post_get="post";
        }else if(window.XMLHttpRequest)
        {
          xmlHttp=new XMLHttpRequest();
          xml_post_get="get";
        }
      }

    function getData()
    {
      CreateXmlHttp();
      //获取用户填写的名称
      var city=document.getElementById("s1").value;

      //加载要链接的页面
      xmlHttp.Open(xml_post_get,"page1.aspx?city="+escape(city),true);

            //将对象状态与事件相关联
      xmlHttp.onreadystatechange=stateChange;

      //发送请求
      xmlHttp.Send(null);
    }

    function stateChange()
    {
      if(xmlHttp.readystate==4)
      {
        if(xmlHttp.status==200)
        {
          FillData(xmlHttp.responseText);
        }
      }
    }

    function FillData(strcity)
    {
       document.getElementById("s2").options.length=0;
       var indexofcity;
       var city;
       //切割传递来的字符串
       while(strcity.length>0)
       {
       //判断是否是最后一个字符串
        indexofcity=strcity.indexOf(",");
        if(indexofcity >0)
        {
        city=strcity.substring(0,indexofcity);
        strcity=strcity.substring(indexofcity+1);
        //填充下拉框
        document.getElementById("s2").add(new Option(city,city));
        }
        else
        {
        // 如果是最后一个字符串
           lastcity=strcity.substring(0,2);
           document.getElementById("s2").add(new Option(lastcity,lastcity));
           break;
        }
       };
    }



    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        省/市：<select id="s1" style="width: 93px" οnchange="getData()">
            <option>--请选择--</option>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="济南">济南</option>
            <option value="其他">其他</option>
        </select> 
        地区：<select id="s2" style="width: 90px">
            <option></option>
        </select>
        <input id="Button1" type="button" value="测试" οnclick="getData()" />
    </div>
    </form>
</body>
</html>

page1.aspx.cs后台代码：

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 page1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

        if (Request.QueryString["city"] != null)
        {
            //获取传递过来的参数
            string city = Request.QueryString["city"];
            //判断城市名
            switch (city)
            {
                case "北京":
                    //填充相关的区域
                    Response.Write("朝阳,海淀,东城,西城");
                    break;
                case "上海":
                    Response.Write("浦东,静安,虹口,徐汇");
                    break;
                case "济南":
                    Response.Write("历下,历城,市中,天桥");
                    break;
                default:
                    Response.Write("其他");
                    break;
            }
            Response.End();
        }

}
}

测试效果：

xBoady

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax 实现局部刷新、无刷新

page1.aspx前台代码：http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml" > 无标题页 var xmlHttp; var xml_post_get; function Cre
复制链接

扫一扫

专栏目录