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>

  • 相关阅读:
    爬取豆瓣分页照片下载
    css布局:三列布局,中间内容优先加载
    解决在IE下label中IMG图片无法选中radio的几个方法
    CSS架构:最新最佳实践
    JavaScript登陆弹窗,可拖拽
    网站变成灰色的代码
    5个jQuery的备选轻量级移动客户端开发(Mobile development)类库
    jQuery 底部漂浮导航当前位置突出 + 锚点平滑滚动
    Exchange 2007 自定义传输规则
    基于jQuery打造TabPanel
  • 原文地址:https://www.cnblogs.com/windy224/p/2163345.html
Copyright © 2011-2022 走看看