Jquery Ajax傳送和接收DataTable的asp.net代碼

本文章講一下關於jquery ajax傳送和接收datatable的asp教程.net代碼哦，下面我來舉例說明一下ajax傳送和接收datatable的執行個體吧。

asp.net教程代碼

簡單舉例說明

webservices：

[webmethod(true)]
  [scriptmethod(responseformat = responseformat.xml)] 
  public string competitor(string sl_id)
  {
  dataset ds;
  slcompetitor slcompetitor =new slcompetitor();
  ds = slcompetitor.getslcompetitor(int.parse(sl_id));
  return ds.getxml();
  }

js：
 

$$.ajax({
  type: "post",
  url:"../webservices/advquerycarwebservice.asmx/deciderdetai",
  data:"{sl_id:"+sl_id+"}",
  datatype: "xml",
  contenttype: "application/json",
  error:function(data){
  alert("載入時出錯,詳情:"+data.status+">>>"+data.statustext);
  },  
  success:function(getxml) {
  tabledecider.removechild(tbodydecider);
  $$(getxml).find("table").each(function(i){//xml 目錄id
  var name=$$(this).children("stakeholder").text(); //取文本

asp.netx檔案

void ihttphandler.processrequest(httpcontext context)
        {
           // context.response.contenttype = "text/json";

            int bids=0;
            int.tryparse(context.request.querystring["bid"].tostring(), out bids);//項目id

            int pid = 0;
            int.tryparse(context.request.querystring["productid"].tostring(),out pid);//產品id

            if (bids != 0 && pid != 0)
            {
                datatable dt = logic.bidaddress.getbidaddresstobidandproductidlist(bids, pid);
                if (dt.rows.count != 0)
                {
                    using (jsonwriter jsont = new jsontextwriter(context.response.output))
                    {
                        jsont.writestartarray();
                        foreach (datarow itemrow in dt.rows)
                        {
                            jsont.writestartobject();

                            jsont.writepropertyname("baid");//table id
                            jsont.writevalue(itemrow["baid"]);

                            jsont.writepropertyname("ps教程address"); //address
                            jsont.writevalue(itemrow["psaddress"]);

                            jsont.writepropertyname("quantity");//數量
                            jsont.writevalue(itemrow["quantity"]);

                            jsont.writepropertyname("unit");//單位
                            jsont.writevalue(itemrow["unit"]);

                            jsont.writepropertyname("note");//備忘
                            jsont.writevalue(itemrow["note"]);

                            jsont.writepropertyname("contactman");//連絡人
                            jsont.writevalue(itemrow["contactman"]);

                            jsont.writepropertyname("contactmobile");//連絡人手機
                            jsont.writevalue(itemrow["contactmobile"]);

                            jsont.writepropertyname("bid");//項目id
                            jsont.writevalue(itemrow["bid"]);

                            jsont.writepropertyname("productid");//產品id
                            jsont.writevalue(itemrow["productid"]);
                            jsont.writeendobject();
                        }
                        jsont.writeendarray();
                    }
                }
                else
                {
                    context.response.output.write("[]");
                }
            }
        }

執行個體代碼二

/// 頁面載入時
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void page_load(object sender, eventargs e)
{
//判斷是否非同步請求
if (request.querystring["ajax"] == "1")
{
processrequest();
}
}
/// <summary>
/// 處理非同步請求
/// </summary>
private void processrequest()
{
response.contenttype = "text/html";
string json = request.form["json"];
//還原序列化datatable
datatable newdtb = json2dtb(json);
//序列化datatable為json
string back = dtb2json(newdtb);
response.write(back);
response.end();
}
/// <summary>
/// datatable轉json
/// </summary>
/// <param name="dtb"></param>
/// <returns></returns>
private string dtb2json(datatable dtb)
{
網頁特效serializer jss = new javascriptserializer();
arraylist dic = new arraylist();
foreach (datarow row in dtb.rows)
{
dictionary<string, object> drow = new dictionary<string, object>();
foreach (datacolumn col in dtb.columns)
{
drow.add(col.columnname, row[col.columnname]);
}
dic.add(drow);
}
return jss.serialize(dic);
}
/// <summary>
/// json轉datatable
/// </summary>
/// <param name="json"></param>
/// <returns></returns>
private datatable json2dtb(string json)
{
javascriptserializer jss = new javascriptserializer();
arraylist dic = jss.deserialize<arraylist>(json);
datatable dtb = new datatable();
if (dic.count > 0)
{
foreach (dictionary<string, object> drow in dic)
{
if (dtb.columns.count == 0)
{
foreach (string key in drow.keys)
{
dtb.columns.add(key, drow[key].gettype());
}
}
datarow row = dtb.newrow();
foreach (string key in drow.keys)
{
row[key] = drow[key];
}
dtb.rows.add(row);
}
}
return dtb;
}

jquery代碼

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript">
//onload
$(function() {
//點擊botton1
$("#botton1").click(function() {
var url = "default.aspx?ajax=1";
var dtb = generatedtb();
//序列化對象
var postdata = json.stringify(dtb);
//非同步請求
$.post(url, { json: postdata }, function(json) {
createtable(json);
}, "json")
});
});
//產生datatable對象
function generatedtb() {
var dtb = new array();
for (var i = 0; i < 10; i++) {
var row = new object();
row.col1 = i;
row.col2 = i % 2 == 0 ? true : false;
row.col3 = i + "henll"ow";
dtb.push(row);
}
return dtb;
}
//顯示json中的資料
function createtable(json) {
var table = $("<table border='1'></table>");
for (var i = 0; i < json.length; i++) {
o1 = json[i];
var row = $("<tr></tr>");
for (key in o1) {
var td = $("<td></td>");
td.text(o1[key].tostring());
td.appendto(row);
}
row.appendto(table);
}
table.appendto($("#back"));
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="botton1" type="button" value="button" />
<div id="back">
</div>
</div>
</form>
</body>
</html>

如果datatable與json類型可以方便的相互轉換，都可以迎刃而解了。
優點：1）避免不必要的回傳；
2）精簡非同步請求資料的大小 ；
3）解決資料量較大時，資料發送與接收繁瑣的問題。