tnblog
首页
视频
资源
登录
愿你出走半生,归来仍是少年
排名
3
文章
317
粉丝
22
评论
14
bootstrap 栅格布局一小例子
剑轩 : 后端写样式有点痛苦哇
一点flex布局的运用
剑轩 : 后端写样式有点痛苦哇
vue.js常用指令
剑轩 : 可以可以,多总结一点
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

AJAX三级联动

5007人阅读 2019/9/2 12:07 总访问:2063191 评论:0 收藏:0 手机
分类: JS相关


做好二级联动,三级联动几乎完全一样了

html:

  1. 省:<select id="provice">
  2. </select>
  3. 市:<select id="city">
  4. </select>

js:

  1. $(function ({
  2.     $.get('ProviceHandler.ashx'function (result{
  3.         //把json字符串反序列化成对象
  4.         var jsonarray = JSON.parse(result);
  5.         var proviceHtml = "";
  6.         //遍历json对象
  7.         for (var i = 0; i < jsonarray.length; i++) {
  8.             var jsonobj = jsonarray[i];
  9.             proviceHtml += "<option value='" + jsonobj.Id + "'>" + jsonobj.Name + "</option>";
  10.         }
  11.         $("#provice").html(proviceHtml);
  12.         getcityByPId();
  13.     });
  14.     $("#provice").change(function ({
  15.         getcityByPId();
  16.     });
  17. });
  18. var getcityByPId = function ({
  19.     $.get('CityHandler.ashx', { pid: $("#provice").val() }, function (result{
  20.         var jsonarray = JSON.parse(result);
  21.         var proviceHtml = "";
  22.         for (var i = 0; i < jsonarray.length; i++) {
  23.             var jsonobj = jsonarray[i];
  24.             proviceHtml += "<option value='" + jsonobj.Id + "'>" + jsonobj.Name + "</option>";
  25.         }
  26.         $("#city").html(proviceHtml);
  27.     });
  28. }

ProviceHandler.ashx

  1. public class ProviceHandler : IHttpHandler
  2. {
  3.     public void ProcessRequest(HttpContext context)
  4.     {
  5.         context.Response.ContentType = "text/plain";
  6.         ProviceCityDAL proviceCityDAL = new ProviceCityDAL();
  7.         List<Provice> proviceList = proviceCityDAL.GetProvices();
  8.         JavaScriptSerializer jss = new JavaScriptSerializer();
  9.         string jsonstr = jss.Serialize(proviceList);
  10.         context.Response.Write(jsonstr);
  11.     }
  12.     public bool IsReusable
  13.     {
  14.         get
  15.         {
  16.             return false;
  17.         }
  18.     }
  19. }

CityHandler.ashx:

  1. public class CityHandler : IHttpHandler
  2. {
  3.     public void ProcessRequest(HttpContext context)
  4.     {
  5.         context.Response.ContentType = "text/plain";
  6.         ProviceCityDAL proviceCityDAL = new ProviceCityDAL();
  7.         string pidstr = context.Request["pid"];
  8.         if (string.IsNullOrWhiteSpace(pidstr))
  9.         {
  10.             context.Response.Write(-1);
  11.             return;
  12.         }
  13.         int pid = Convert.ToInt32(pidstr);
  14.         List<City> cityList = proviceCityDAL.GetCitysByPId(pid);
  15.         JavaScriptSerializer jss = new JavaScriptSerializer();
  16.         string jsonstr = jss.Serialize(cityList);
  17.         context.Response.Write(jsonstr);
  18.     }
  19.     public bool IsReusable
  20.     {
  21.         get
  22.         {
  23.             return false;
  24.         }
  25.     }
  26. }



欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

AJAXget时请求异步缓存

ajax中的get为何有时执行,有时不执行?(九十岁老太为何起死回生,数百头母猪为何半夜惨叫;女生宿舍为何频频失窃,超市方...

动态生成表格批量添加再使用AJAX提交后台

&lt;!DOCTYPE html&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&lt;head&gt; &lt;meta http-equiv=&...

jquery验证插件formValidator,AJAX验证手动传值

AJAX验证默认会传递你绑定的id的name值回去,如何你想传递其他值回去的话,直接这样写是不行的应该要这样使用,通过一个方...

AJAXSubmit异步上传图片(嘘,外面都是假的)

引用代码&lt;scriptsrc=&quot;/Scripts/jquery.form.js&quot;&gt;&lt;/script&gt;js就在旁边img链接中,只不过大小为0x0,...

AJAX调用webapi上传图片或文件。设置token,设置Authorization Bearer

AJAX调用webapi上传图片或文件,并返回刚上传的文件名。废话不多说直接贴代码吧html相关:&lt;!DOCTYPEhtml&gt; &lt;html&...

ASP.NET MVC Controller接收AJAX post方式发送过来的json对象或数组数据

1、将json数组或者json对象用JSON.stringify()方法序列化成字符串,再将字符串提交到后台。varstuarr=newArray();//创建一...

刷新加载 跟AJAX冲突

死循环的问题前台发送了一个Ajax请求但是后台是以刷新加载的方式输出今天老师说了一个打酱油的案例酱油店就相当于后天

AJAX从前台序列化传对象

前台部分//点击确定过后构造一个json对象 varjsonDBJ={}; //对象名字要与后台对象名字对应 jsonDBJ.id=&quot;001&quot;;...

AJAX从后台序列化传对象

对象部分publicclassProvice { publicstringid{get;set;} publicstringUsername{get;set;} publicstringUsernum{get;se...

关于AJAX页面跳转

AJAX 一般配合一般处理程序使用,但是使用AJAX传的值验证成功过后页面不会跳转,而是直接在本页面中打开目标页面

AJAX 使用基础

前 言tnblogajax(异步 javaScript xml)能够刷新网页局部数据而不是刷新网页。所有现代浏览器均支持 XMLHttpRequest 对象(...

jquery AJAX设置authorization: Bearer。AJAX设置Content-Type,设置token。AJAX提交表单上传文件

jquery ajax设置authorization: Bearer 这样就行了 headers: { &quot;Authorization&quot;:&quot;Bearer &quot;+t...

AJAX查看请求的接口和请求的参数,爬虫分析AJAX请求需要传递的参数,返回值等

查看ajax请求需要传递的参数,用google调试的就可以查看。 PayLoad可以参看请求携带的参数 headers可以查看请求地址等

vue.js 三级联动

code: &lt;scriptsrc=&quot;https://cdn.jsdelivr.net/npm/vue@2&quot;&gt;&lt;/script&gt; &lt;scriptsrc=&quot;~/Scrip...