zoukankan      html  css  js  c++  java
  • ajax调用后台Datatable

    之前遇到的问题,用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>

  • 相关阅读:
    Codeforces Round 546 (Div. 2)
    Codeforces Round 545 (Div. 2)
    Codeforces Round 544(Div. 3)
    牛客小白月赛12
    Codeforces Round 261(Div. 2)
    Codeforces Round 260(Div. 2)
    Codeforces Round 259(Div. 2)
    Codeforces Round 258(Div. 2)
    Codeforces Round 257 (Div. 2)
    《A First Course in Probability》-chaper5-连续型随机变量-随机变量函数的分布
  • 原文地址:https://www.cnblogs.com/janes/p/2152380.html
Copyright © 2011-2022 走看看