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>

  • 相关阅读:
    注册机实现算法
    nginx优化配置服务,快速提升服务器性能,突破100000万高并发不是梦!
    语雀、有道云笔记、滴答清单一键保存文章,剪藏文章chrom、360极速浏览器火狐插件
    超简单!查询自己在CSDN、博客园、简书、知乎、51CTO等平台的百度收录情况
    最全的中文Vscode扩展插件&配置调试&快捷键&格式化方法
    中文汉化atom最美前端开发编辑器插件安装和常用配置&快捷键,5年的使用心得
    加速Github访问,最新地址仅需1步!修改host快速达到2M!
    使用标签link rel="alternate"属性,帮助搜索引擎对不同设备的用户提供不同类型的页面
    JavaScript高级程序设计学习笔记(1)
    idea中多模块项目引入
  • 原文地址:https://www.cnblogs.com/janes/p/2152380.html
Copyright © 2011-2022 走看看