之前遇到的問題,用AjaxPro方式沒有實現,後來使用的Jquery .ajax方法調用背景WebMethod返回的DataTable來實現的。有園友問關於將DataTable轉換成JSON格式的疑問,我就簡單的寫個例子,描述實現過程。
1,建立頁面TestAjax2.aspx;
<body>
<form id="form1" runat="server">
<input id="btnJson" type="button" value="JSON" />
<div class="case_input1" id="article">
<ul>
</ul>
</div>
</form>
</body>
2.添加引用System.Web.Extension.
添加命名空間
using System.Web.Services;
using System.Collections;
using System.Web.Script.Serialization;
3. 在.cs檔案中構建WebMethod方法,返回DataTable類型。
[WebMethod]
public static string getDataTable(string cid, string site)
{
DataSet ds = new UserCase().GetResult(cid, site, string.Empty);
string s = DTtoJSON(ds.Tables[0]);
return s.ToString();
}
4.添加方法,將DataTable轉換為JSON。
public static string DTtoJSON(DataTable dt)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
ArrayList dic = new ArrayList();
foreach (DataRow row in dt.Rows)
{
Dictionary<string, object> drow = new Dictionary<string, object>();
foreach (DataColumn col in dt.Columns)
{
drow.Add(col.ColumnName, row[col.ColumnName]);
}
dic.Add(drow);
}
return jss.Serialize(dic);
}
5.aspx頁面中用JQUERY進行AJAX調用。
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("#btnJson").click(function () {
$.ajax({
type: "Post",
url: "TestAjax2.aspx/getRelatedArticle", //url頁面/方法名
data: "{'cid':'C0503','site':'TP'}", //參數 {key/value}
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (data) {
data = jQuery.parseJSON(data.d);
$.each(data, function (i, item) {
$("#article ul").append('<li><a href="' + item.Href + '" target=_blank>' + item.Title+ '</a></li>')
})
},
error: function (error) {
alert(error);
}
});
})
})
</script>