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>

  • 相关阅读:
    蓝牙遥控小车设计(二)——车体搭建和利用串口遥控小车
    WIN7下使用sublime text3替代arduino IDE(安装方法和所遇到的问题)
    在使用Arduino中遇到的问题(无法使用中文注释、程序无法下载)
    python 任务调度模块sched
    使用__all__限制模块可被导入对象
    python判断任务是CPU密集型还是IO密集型
    使用__slots__限制实例的属性
    使用装饰器获取被调用函数的执行的时间
    python上下文管理器
    http协议以及http1.0和http1.1的区别
  • 原文地址:https://www.cnblogs.com/janes/p/2152380.html
Copyright © 2011-2022 走看看