基於Jquery ajax 與 Jquery外掛程式 Ztree使用說明

因為以前自己也摸索過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);   }

這下徹底成功啦。

總結

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來實現動態輸樹形操作菜單。