最近一个项目中需要很多地方做无刷新技术,那么就用到了Jquery ajax,以前因为项目做无刷新的要求比较少点,又加上上个公司主要是用VS2003开发,哎这个老古董是够老啊,从 前一个公司离职,主要也是因为公司的主要框架是在2003,接触不到新的东西,所以离开的。
因为以前自己也摸索过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) { StringBuilder Json = new StringBuilder(); Json.Append("["); if (IL.Count > 0) { for (int i = 0; i < IL.Count; i++) { T obj = Activator.CreateInstance<T>(); Type type = obj.GetType(); PropertyInfo[] pis = type.GetProperties(); Json.Append("{"); for (int j = 0; j < pis.Length; j++) { Json.Append("\"" + pis[j].Name.ToString() + "\":\"" + pis[j].GetValue(IL[i], null) + "\""); if (j < pis.Length - 1) { Json.Append(","); } } Json.Append("}"); if (i < IL.Count - 1) { Json.Append(","); } } } Json.Append("]"); return Json.ToString(); }
前台JS代码如下:

$(document).ready(function() { $.ajax({ type: "POST", url: "programList.aspx/getClassData", dataType: "json", contentType: "application/json; charset=utf-8", success: function(msg) { alert(eval("(" + msg + ")").d); }, error: function(xhr, msg, e) { alert(msg); } }); // 初始化数据(显示第一页) onloadGrid(0); InitData(0, 0); });
运行又得到错误: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); }
这下彻底成功啦。
折腾啊,网上有些代码到处都是错,这真让人郁闷,所以我把我所遇到的一些问题,记下来。
这里也推荐下ajax的调试工具:FireBug以及jquery树插件Ztree。