摘要:[jQuery+Ajax+Json]利用JSon+Ajax從Server讀取資料後,於前端用jQuery讀取出JSon物件(搭配JSon.net的dll)
到http://james.newtonking.com/json
下載Jason.net套件,解壓縮之後到bin裡面找自己專案framework版本的資料夾Net40
找到Newtonsoft.Json.dll之後,加入參考到專案
然後記得在程式碼裡面引用
Imports Newtonsoft.Json
首先從資料庫讀取出資料
ps.這裡ajax的做法是用ajaxpro元件去做,當然也可以用最常見的jQuery + Webmethod去做,有興趣可參考
[jQuery+ASP.NET]jQuery ajax Call webmethod
<AjaxPro.AjaxMethod(AjaxPro.HttpSessionStateRequirement.ReadWrite)> _ Public Function testAjaxJqueryJSon() As String Dim dt As New DataTable dt.Columns.Add("name") dt.Columns.Add("idno") Dim dr As DataRow = dt.NewRow dr("name") = "王先生" dr("idno") = "A123456789" dt.Rows.Add(dr) Dim strJSon As String = JsonConvert.SerializeObject(dt, Formatting.Indented).Replace("[", "").Replace("]", "") Return strJSon End Function
然後到前端用jQuery讀取資料(這是讀取單筆資料的情況)
$(document).ready(function () {
var jsonString;
jsonString = ISSALWeb.wFrmFinData.testAjaxJqueryJSon().value;
var jsonObject = jQuery.parseJSON(jsonString);
alert(jsonObject.name + jsonObject.idno);
});
如果JSon是多筆資料的話
var jsonObject = jQuery.parseJSON(jsonString);
//用迴圈的方式逐筆印出
for (var i = 0; i < jsonObject.length; i++) {
alert(jsonObject[i].EmployeeID);
alert(jsonObject[i].LastName);
}
收工
補充一下,如果不想另外加入JSON.NET元件,用微軟內建的也可以把DataTable轉成JSon,如下
public string DtToJSon(DataTable dt) { System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer(); List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>(); Dictionary<string, object> row = null; foreach (DataRow dr in dt.Rows) { row = new Dictionary<string, object>(); foreach (DataColumn col in dt.Columns) { row.Add(col.ColumnName.Trim(), dr[col]); } rows.Add(row); } return serializer.Serialize(rows); }
如果不想另外加入AjaxPro元件,只用單純jQuery做也可以,參考下面連結: