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>

  • 相关阅读:
    python flsak 框架
    postman
    压力测试和负载测试
    软件测试相关内容
    Linux常用基本命令
    leetcode刷题——反转字符串
    leetcode——搜索插入位置
    leetcode刷题——移除元素
    leetcode 刷题 ——删除排序数组中的重复项
    json.decoder.JSONDecodeError: Expecting value 错误的处理
  • 原文地址:https://www.cnblogs.com/windy224/p/2163345.html
Copyright © 2011-2022 走看看