无刷新联动大烧烤(XMLHttpRequest,AJAX Library)

2023-10-25 08:59

本文主要是介绍无刷新联动大烧烤(XMLHttpRequest,AJAX Library),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

      关于无刷新联动,目前实现的方法有很多种,可以使用XMLHttpRequest对象来实现,也可以采用Ajax Library,另外也可以使用AjaxControlToolkit里的控件来实现.刚刚这些天在一个项目里使用到了这个功能.下面简单介绍下实现的思路.希望对初学者在学习上有所帮助.
    
     通常联动又分静态联动(数据不变)和动态联动(数据会变动),比如省市区县这里固定数据就是很少变动的。又比如一个公司里,下面分得有不同的部分,各部门下又可能有不能的小组......这样的关系,各个小组都有可能随时都会变动的,撤消也可能会增加小组等。下面我就一动态联动简单介绍下。

准备工作:
 ● 建立数据库

Code
 1USE AJAX
 2if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[Citys]'and OBJECTPROPERTY(id, N'IsUserTable'= 1)
 3drop table [dbo].[Citys]
 4GO
 5
 6if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[Districts]'and OBJECTPROPERTY(id, N'IsUserTable'= 1)
 7drop table [dbo].[Districts]
 8GO
 9
10CREATE TABLE [dbo].[Citys] (
11    [CityID] [int] IDENTITY (11NOT NULL ,
12    [CityName] [varchar] (50) COLLATE Chinese_PRC_CI_AS NULL 
13ON [PRIMARY]
14GO
15
16CREATE TABLE [dbo].[Districts] (
17    [DistrictID] [int] IDENTITY (11NOT NULL ,
18    [DistrictName] [varchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
19    [CityID] [int] NULL 
20ON [PRIMARY]
21GO
22
23

 ● 初始化数据
     

 ● 建立相关类和WebService

City
 1public class City
 2{
 3    public City() { }
 4    public City(int id, string name)
 5    {
 6        this.CityId = id;
 7        this.CityName = name;
 8    }

 9
10    private int _cityId;
11    public int CityId
12    {
13        get return _cityId; }
14        set { _cityId = value; }
15    }

16
17    private string _cityName;
18    public string CityName
19    {
20        get return _cityName; }
21        set { _cityName = value; }
22    }

23}
District
 1public class District
 2{
 3    public District(){ }
 4    public District(int id, string name,int cid)
 5    {
 6        this.DistrictId = id;
 7        this.DistrictName = name;
 8        this.CityID = cid;
 9    }

10
11    private int _districtId;
12    public int DistrictId
13    {
14        get return _districtId; }
15        set { _districtId = value; }
16    }

17
18    private string _districtName;
19    public string DistrictName
20    {
21        get return _districtName; }
22        set { _districtName = value; }
23    }

24
25    private int _cityID;
26    public int CityID
27    {
28        get return _cityID; }
29        set { _cityID = value; }
30    }

31}
AjaxPattern.WebService
 1namespace AjaxPattern
 2{
 3    /**//// <summary>
 4    /// WebService 的摘要说明
 5    /// </summary>

 6    [WebService(Namespace = "http://tempuri.org/")]
 7    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
 8    [ScriptService]
 9    public class WebService : System.Web.Services.WebService
10    {
11
12        public WebService() { }
13
14        [WebMethod]
15        public City[] GetCitys()
16        {
17            List<City> list = new List<City>();
18            DataTable dt = DataAccess.GetCitys();
19            foreach (DataRow row in dt.Rows)
20            {
21                list.Add(new City(
22                    int.Parse(row["CityID"].ToString()),
23                    row["CityName"].ToString()));
24            }

25            return list.ToArray();
26        }

27
28        [WebMethod]
29        public District[] GetDistricts(int cityID)
30        {
31            List<District> list = new List<District>();
32            DataTable dt = DataAccess.GetDistricts(cityID);
33            foreach (DataRow row in dt.Rows)
34            {
35                list.Add(new District(
36                    int.Parse(row["DistrictID"].ToString()),
37                    row["DistrictName"].ToString(),
38                    int.Parse(row["CityID"].ToString())));
39            }

40            return list.ToArray();
41        }

42    }

43}

一、使用XMLHttpRequest实现
     建立两个aspx文件,AjaxClient.asp,AjaxServer.aspx,下面是两个文件的CS代码定义:

 1 public   partial   class  AjaxClient : System.Web.UI.Page
 2 {
 3    protected void Page_Load(object sender, EventArgs e)
 4    {
 5        if (!IsPostBack)
 6        {
 7            this.ddlCitys.DataSource = new WebService().GetCitys();
 8            this.ddlCitys.DataTextField = "CityName";
 9            this.ddlCitys.DataValueField = "CityID";
10            this.ddlCitys.DataBind();
11            ddlCitys.Items.Insert(0new ListItem("--请选择--""0"));
12            ddlDistricts.Items.Insert(0new ListItem("--请选择--""0"));
13
14            this.ddlCitys.Attributes.Add("onchange""getDistrictByCityID(this.value);");
15            this.ddlDistricts.Attributes.Add("onchange""displayResults();");
16        }

17    }

18}

     在AjaxClient.aspx里放置了两个下拉列表控件,一个用来显示城市,一个用来显示区。在AjaxClient的服务端我们为城市绑定好数据,这里是通过调用WebService里的GetCitys()得到的一个数组,详细可以看上面的WebService的详细定义代码,这里我们还为这两个控件设置了客户端事件及响应事件的方法。下面我们看看AjaxServer.aspx的定义:

 1 public   partial   class  AjaxServer : System.Web.UI.Page
 2 {
 3    protected void Page_Load(object sender, EventArgs e)
 4    {
 5        int cityID = 0;
 6        if (Request["CityID"!= null)
 7        {
 8            int.TryParse(Request["CityID"], out cityID);
 9        }

10        GetDistricts(cityID);
11    }

12
13    private void GetDistricts(int cityID)
14    {
15        District[] dist = new WebService().GetDistricts(cityID);
16        StringBuilder sb = new StringBuilder();
17        sb.Append(@"<?xml version=""1.0"" ?>");
18        sb.Append(@"<Districts>");
19        foreach (District d in dist)
20        {
21            sb.Append(@"<District id='" + d.DistrictId + "' cityID='" + d.CityID + "'>" + d.DistrictName + "</District>");
22        }

23        sb.Append(@"</Districts>");
24        Response.Clear();
25        Response.ContentType = "text/xml";
26        Response.Write(sb.ToString());
27        Response.End();
28    }

29}

    上面的代码不难理解,在Page_Load里获取AjaxClient.aspx传递过来的CityID这个参数,然后通过这个参数的值调用下面定义的GetDistricts方法,在这方法里通过调用WebService里的方法得到查询数据库得到一个数组对象。然后在把这个数组对象解吸为XML并Response给客户端。客户端的JavaScript定义如下:

 1 < script type = " text/javascript " >
 2     // //初始化客户端控件引用
 3     var  ddlCitys = document.getElementById( " <% = ddlCitys.ClientID %> " );
 4     var  ddlDistricts = document.getElementById( " <% = ddlDistricts.ClientID %> " );
 5
 6      // 初始化HttpRequest
 7      var  HttpRequest  =   false ;
 8      if (window.XMLHttpRequest)
 9      {
10       HttpRequest = new XMLHttpRequest();
11    }

12      else
13      {
14       HttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
15    }

16     
17     resetDistrit();
18     
19      function  getDistrictByCityID(cityID)
20      {
21       if(!HttpRequest) return;
22       if(cityID<0return;
23       
24       var uri="AjaxServer.aspx?CityID="+cityID; 
25       HttpRequest.open("GET",uri);
26       HttpRequest.onreadystatechange=function()
27       {
28          if (HttpRequest.readyState == 4 && HttpRequest.status == 200)
29          {
30             var xml=HttpRequest.responseXML;
31             var disctricts=xml.getElementsByTagName("District");
32             ddlDistricts.options.length=0;
33             
34             for(i=0;i<disctricts.length;i++)
35             {
36                var value=disctricts[i].firstChild.nodeValue;
37                var id=disctricts[i].attributes[0].value;
38                ddlDistricts.options[i]=new Option(value,id);
39             }

40          }

41          ddlDistricts.disabled=false;
42       }

43       HttpRequest.send(null);
44    }

45     
46      function  displayResults()
47      {
48       var result="";
49       var citys=document.getElementsByName(ddlCitys);
50       var district=document.getElementsByName(ddlDistricts);
51       if(ddlDistricts.selectedIndex>0)
52       {
53          result += ddlCitys.options[ddlCitys.selectedIndex].text +" ";
54          result += ddlDistricts.options[ddlDistricts.selectedIndex].text; 
55       }

56       document.getElementById("Results").innerHTML=result;
57    }

58     
59      function  resetDistrit()
60      {
61      ddlDistricts.options.length=0;
62      ddlDistricts.disabled=true;
63    }

64 < / script>

    来分析下上面的JavaScript的定义,getDistrictByCityID方法就是通过CityID做为参数向AjaxServer.aspx发起请求,然后返回一个XML对象,然后通过getDistrictByCityID方法的回调函数来处理返回的XML,解析后把值绑定到ddlDistrict这个下拉列表控件上,这样使用XMLHttpRequest就实现了异步发起请求并处理回调的方式实现了无刷新联动。运行如下:
    

二、使用AJAX Library实现
    这里我简单介绍下使用AJAX Library的实现,通过ScritrpManager访问WebService的方法调用方法得到一个数组对象,在客户端通过JavaScript解析数组实现,先看看WebService里的方法定义:

 1 [WebMethod]
 2 public  District[] GetDistricts( int  cityID)
 3 {
 4    List<District> list = new List<District>();
 5    DataTable dt = DataAccess.GetDistricts(cityID);
 6    foreach (DataRow row in dt.Rows)
 7    {
 8        list.Add(new District(
 9            int.Parse(row["DistrictID"].ToString()),
10            row["DistrictName"].ToString(),
11            int.Parse(row["CityID"].ToString())));
12    }

13    return list.ToArray();
14}

    此方法返回一个数组到客户端,客户端通过回调函数来处理这个数组并把数据绑定到下拉列表控件上。这里同上一样先初始化一个下拉列表控件的数据:

 1 public   partial   class  AjajLibrary : System.Web.UI.Page
 2 {
 3    protected void Page_Load(object sender, EventArgs e)
 4    {
 5        if (!IsPostBack)
 6        {
 7            this.ddlCitys.DataSource = new WebService().GetCitys();
 8            this.ddlCitys.DataTextField = "CityName";
 9            this.ddlCitys.DataValueField = "CityID";
10            this.ddlCitys.DataBind();
11
12            ddlCitys.Items.Insert(0new ListItem("--请选择--""0"));
13            this.ddlCitys.Attributes.Add("onchange""onCityChanged(this.value);");
14            this.ddlDistricts.Attributes.Add("onchange""onDistrictChanged();");
15        }

16    }

17}

引入Webservice:

1 < asp:ScriptManager  ID ="ScriptManager1"  runat ="server" >
2    < Services >
3      < asp:ServiceReference  Path ="WebService.asmx"  InlineScript ="true"   />
4    </ Services >
5 </ asp:ScriptManager >
 1 < script type = " text/javascript " >
 2 // 初始化控件引用
 3 var  ddlCitys  =  $get( " <% = ddlCitys.ClientID %> " );
 4 var  ddlDistrict  =  $get( " <% = ddlDistricts.ClientID %> " );
 5    
 6 var  obj = "" ;
 7
 8 function  onCityChanged(cityID)
 9 {
10   if(cityID > 0)
11   {
12      AjaxPattern.WebService.GetDistricts(cityID,onGetDistrictCallBack);
13   }

14}

15
16 function  onDistrictChanged()
17 {
18   obj += ddlCitys.options[ddlCitys.selectedIndex].text + " ";
19   obj += ddlDistricts.options[ddlDistricts.selectedIndex].text;
20   
21   $get("results").innerHTML = obj;
22}

23
24 function  onGetDistrictCallBack(dates)
25 {  
26  for(var i=0;i<dates.length;i++)
27  {
28     var value = dates[i].DistrictName; 
29     var id=dates[i].DistrictID;
30     ddlDistrict.options[0]=new Option(value,id);
31  }

32
33}

34 < / script>

三、使用AjaxControlToolkit控件实现
     这部分是最简单的,在这里我就不做介绍了。有兴趣的可以查阅相关资料进行了解,官方文档里也有详细Demo.

这篇关于无刷新联动大烧烤(XMLHttpRequest,AJAX Library)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:https://blog.csdn.net/weixin_34269583/article/details/85404237
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/281466

相关文章

RabbitMQ消息总线方式刷新配置服务全过程

《RabbitMQ消息总线方式刷新配置服务全过程》SpringCloudBus通过消息总线与MQ实现微服务配置统一刷新,结合GitWebhooks自动触发更新,避免手动重启,提升效率与可靠性,适用于配... 目录前言介绍环境准备代码示例测试验证总结前言介绍在微服务架构中,为了更方便的向微服务实例广播消息,

SpringCloud使用Nacos 配置中心实现配置自动刷新功能使用

《SpringCloud使用Nacos配置中心实现配置自动刷新功能使用》SpringCloud项目中使用Nacos作为配置中心可以方便开发及运维人员随时查看配置信息,及配置共享,并且Nacos支持配... 目录前言一、Nacos中集中配置方式?二、使用步骤1.使用$Value 注解2.使用@Configur

SpringMVC 通过ajax 前后端数据交互的实现方法

《SpringMVC通过ajax前后端数据交互的实现方法》:本文主要介绍SpringMVC通过ajax前后端数据交互的实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价... 在前端的开发过程中,经常在html页面通过AJAX进行前后端数据的交互,SpringMVC的controll

AJAX请求上传下载进度监控实现方式

《AJAX请求上传下载进度监控实现方式》在日常Web开发中,AJAX(AsynchronousJavaScriptandXML)被广泛用于异步请求数据,而无需刷新整个页面,:本文主要介绍AJAX请... 目录1. 前言2. 基于XMLHttpRequest的进度监控2.1 基础版文件上传监控2.2 增强版多

easyui同时验证账户格式和ajax是否存在

accountName: {validator: function (value, param) {if (!/^[a-zA-Z][a-zA-Z0-9_]{3,15}$/i.test(value)) {$.fn.validatebox.defaults.rules.accountName.message = '账户名称不合法(字母开头,允许4-16字节,允许字母数字下划线)';return fal

javascript实现ajax

什么是 ajax ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取。 http 请求 首先需要了解 http 请求的方法(GET 和 POST)。 GET 用于获取数据。GET 是在 URL 中传递数据,它的安全性低,容量低。 POST 用于上传数据。POST 安全性一般,容量几乎无限。 aj

jQuery—Ajax使用

AJAX是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新[百度百科]   ** XMLHttpRequest对象 XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 常用属性: read

Ajax 解决回调竞争

回调的竞争,即多次快速点击同一按钮导致多个异步的AJAX请求同时返回,导致数据更新顺序混乱。这种情况在异步编程中很常见,特别是前端开发时,AJAX请求的回调并不保证按顺序执行。 $.ajaxSetup() 可以设置全局的 beforeSend 和 complete 回调函数,这样每个 AJAX 请求在发送前和完成后都可以执行相应的逻辑。 let isRequestPending = false

PIL Python Imaging Library (PIL)

介绍         把Python的基础知识学习后,尝试一下如何安装、加载、使用非标准库,选择了图像处理模块PIL。         Python Imaging Library (PIL)是PythonWare公司提供的免费的图像处理工具包,是python下的图像处理模块,支持多种格式,并提供强大的图形与图像处理功能。虽然在这个软件包上要实现类似MATLAB中的复杂的图像处理算法并不

js操作Dom节点拼接表单及ajax提交表单

有时候我们不希望html(jsp、vm)中有创建太多的标签(dom节点),所以这些任务都由js来做,下面提供套完整的表单提交流程,只需要在html中添加两个div其余的都由js来做吧。下面原生代码只需略微修改就能达到你想要的效果。 1、需要创建表单的点击事件 <a href="javascript:void(0);"onclick="changeSettleMoney('$!doctor.do