WebForm使用JQuery实现DropDownList无刷新联动
来源:互联网 发布:七日杀小人物模型数据 编辑:程序博客网 时间:2024/05/22 13:37
原来用的微软封装的Ajax控件UpdatePannel和ScriptManager去实现无刷新联动,但一直出现意料之外的现象导致不正常联动。单独的做demo就没事,放到系统中就出问题,经过调试之后仍然不解。条条大路通罗马,还不信能被憋死了。众所周知,JQuery封装了Ajax,调用起来比原生的Ajax要好用的多,实现异步刷新当然也更一些了,虽然功能简单,直接看代码:
1. JS代码:
<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:14px;"><script type="text/javascript" language="javascript"> $(function () { //利用dropdownlist的change事件 $("#hbKeyWordsType").change(function () { //获取关键字类型 var keyType = $("#hbKeyWordsType").val(); $.ajax({ url: "WxKeywords_WxMessageFunOperation.aspx/hbKeyWordsType_SelectedIndexChanged", //调用后台方法:页面/方法名 type: "post", data: "{typeCode:" + keyType + "}", //给后台传递数据,参数名必须跟方法的参数名一致 contentType: "application/json;charset=uft-8", success: function (dataJson) { $("#hbKeysName").empty(); //清除关键字下拉框中原来存在的数据 var strNames = eval(dataJson.d); //必须加.d,否则无法解析。不太清除原因,通过调试发现存在,但代码中智能提示中却没有d for (var i = 0; i < strNames.length; i++) { $("#hbKeysName").append($("<option value='" + strNames[i].Code + "'>" + strNames[i].Keywords + "</option>")); //这个添加关键字 } }, Error: function () { alert("服务器错误,请联系管理员!"); } }); }); }); </script></span></span>
2. 页面相关控件(用的是平台封装的控件,普通DropDownList也可以)
<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:14px;"><td class="fieldtitle"> 关键字类型</td><td class="fieldvalue"> <SOA:HBDropDownList runat="server" ID="hbKeyWordsType" /> </td><td class="fieldtitle"> 关键字名称</td><td class="fieldvalue"> <SOA:HBDropDownList runat="server" ID="hbKeysName" /></td></span></span>
3. 后台C#代码
<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:14px;">[WebMethod] //用于前台Jquery的调用 public static string hbKeyWordsType_SelectedIndexChanged(string typeCode) { //根据选取的关键字类型和公共号编码查找关键字实体集合 string accountCode = WxMessageAdapter.Instance.GetCurrentWxAccountCode(); int keyWordsType =int.Parse(typeCode); WxKeywordsCollection wxKeyColl = WxKeywords_WxMessageAdapter.Instance.LoadByAccAndKeyType(accountCode, keyWordsType); //使用封装好的JSON序列化的方法返回Json串 string reutnJson=JSONSerializerExecute.Serialize(wxKeyColl); return reutnJson; }</span></span>
注意事项:
1. 前台页面: ①url:"本页面名称/方法名称"; ②必须添加contentType:"application/json;charset=utf-8"; ③dataJson.d通过.d属性来取服务端返回的数据
2. 后台方法: ①方法由[WebMethod]修饰; ②方法必须是公共且静态的方法; ③方法里的参数名称必须与脚本里data的参数名一样,顺序可以不一样
之前dataJson没有添加.d,一直取不到后台返回来的数据,通过调试之后发现其实已经返回来了,只不过是data.d的形式,如下图:
从上图可以看出,dataJson是一个对象,而Eval函数是只能解析字符串的,导致一直取不到值。做这个功能花费了很长时间,虽然最终做出来了,也没多少欣慰,工作中的任务可是不等人的。但,万事开头难,只要上手了,一切都会好起来。
1 0
- WebForm使用JQuery实现DropDownList无刷新联动
- jquery实现两个dropdownlist无刷新联动
- Jquery实现无刷新DropDownList联动
- jquery实现两个dropdownlist无刷新联动 .
- Jquery实现无刷新DropDownList联动
- 用Jquery实现两个dropdownlist无刷新联动
- jquery实现下拉列框(Html.DropDownList)无刷新联动
- 实现无刷新DropDownList联动效果。
- 实现无刷新DropDownList联动效果
- 实现无刷新DropdownList联动效果
- ASP.NET实现无刷新DropDownList联动
- 实现无刷新DropDownList联动效果
- 实现无刷新DropdownList联动效果
- 实现无刷新DropdownList联动效果
- 实现DropDownList无刷新二级联动
- 实现无刷新DropdownList联动效果
- ajax实现无刷新两级联动DropDownList
- 实现无刷新DropDownList联动效果
- java工程积累——前台页面的统一校验
- WSN(无线传感器网络)简介
- java打包的方式
- ORACEL查看当前登陆用户的权限或者角色
- 正则表达式全部符号解释
- WebForm使用JQuery实现DropDownList无刷新联动
- Java与数字签名
- Android初入门(二)“脸萌”布局
- 数据字典和视图
- 探索Oracle之数据库升级二 11.2.0.3升级到11.2.0.4完整步骤
- 集深数据系统V5-动态改变列
- 紫荆之声团委微信应用第一次迭代感想
- Linux-----内核移植篇
- perl中eval函数的两种使用方式