因为以前自己也摸索过jquery ajax,但是还是实际项目却用的少,开始还以为不会遇到很多问题,结果却让我头疼呵呵,大大小小的问题,让我当初有砸鼠标的问题(砸电脑的想法却没有),所以现在记点东西。
问题1:开发环境是在VS2008上,但是得使用.NET 2.0,所以就遇到了问题,发现竟然ajax竟然不进后台的方法。
测试
代码如下 | 复制代码 |
$(document).ready(function() { $.ajax({ type: "POST", url: "default.aspx/HelloWord", dataType: "text", contentType: "application/json; charset=utf-8", beforeSend: function(XMLHttpRequest) { $('#show').text("正在查询"); }, success: function(msg) { alert(eval("(" + msg + ")").d); }, error: function(xhr, msg, e) { alert(msg); } }); }); [System.Web.Services.WebMethod()] public static string HelloWord() { return "Hello Word"; } |
然后运行得到的却是:看到页面上有个JS语法错误,经过查找发现web.config文件里面缺少一段代码,所以我把这段代码拷到web.config的<system.web>节点下,然后运行成功。
代码如下 | 复制代码 |
<httpModules> <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> </httpModules> |
问题2:后台返回的是JSON格式的数据,JS接收数据存为JSON数据对象。
因为我后台取得的数据时IList<T>格式的,所以需要转换为JSON格式类型的,所以使用了网上搜到的一个方法。
代码如下 | 复制代码 |
public static string ObjectToJson<T>(string jsonName, IList<T> IL) |
前台JS
代码如下 | 复制代码 |
$(document).ready(function() { |
运行又得到错误:JS错误缺少']',然后我用FireBug工具查看是否取到JSON值,查看得到,数据已经有响应,并且符合JSON格式而并没有缺少']', 所以我又将JS里面的dataType:text,运行后弹出数据成功。这里我真的很纳闷,不知道是我后台的转换方法不对,还是前台JS的不对,这里发一疑问,麻烦看过的,知道的说声,这里先谢谢啦。
问题3:前面得到JSON格式的数据,绑定到Ztree上,发生错误,然后我在页面上自己var一个对象,赋值这段值(从Fire Bug 中拷贝出来),绑定成功。
仔细的查看Ztree的API,发现绑定的数据源必须是JSON对象,而我前面得到的却是JSON格式的字符串,所以这里我们必须把得到的数据转换为JSON对象。
代码如下 | 复制代码 |
success: function(msg) { treeData = jQuery.parseJSON(msg); var json = eval('(' + treeData.d + ')'); zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, json); } |
这下彻底成功啦。
总结
jquery ajax 我就不说了有很多教程如 http://www.111cn.net/wy/js-ajax/jquery-ajax.post.htm
下面简单介绍一下jquery ztree的作用
zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件
兼容 IE、FireFox、Chrome 等浏览器
在一个页面内可同时生成多个 Tree 实例
支持 JSON 数据
支持一次性静态生成 和 Ajax 异步加载 两种方式
支持多种事件响应及反馈
支持 Tree 的节点移动、编辑、删除
支持任意更换皮肤 / 个性化图标(依靠css)
支持极其灵活的 checkbox 或 radio 选择功能
简单的参数配置实现 灵活多变的功能
zTree是一个树形目录展示开展我们在很多网站可以看到,本文章是结合了jquery ajax返回的数据给jquery ztree来实现动态的输树形操作菜单。