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


    本文转自 陈敬(Cathy) 博客园博客,原文链接:

http://www.cnblogs.com/janes/archive/2011/08/24/2152380.html

,如需转载请自行联系原作者


相关文章
|
6天前
|
存储 移动开发 JavaScript
【原生】sd.js帮助您简化繁重的获取数据、存储数据(CRUD)骚操作(吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据)
【原生】sd.js帮助您简化繁重的获取数据、存储数据(CRUD)骚操作(吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据)
|
6天前
|
前端开发 JavaScript
解决Ajax发送DELETE请求时后台无法接收到参数的问题(Restful风格)
解决Ajax发送DELETE请求时后台无法接收到参数的问题(Restful风格)
64 0
|
6月前
|
前端开发
Ajax提交请求后台返回一个完整的html页面
Ajax提交请求后台返回一个完整的html页面
|
9月前
|
前端开发
如何对ajax请求的后台数据添加到swiper轮播图并展示到页面
如何对ajax请求的后台数据添加到swiper轮播图并展示到页面
100 0
|
9月前
|
前端开发
如何用ajax请求后台数据的两种全网最实用且详细的写法
如何用ajax请求后台数据的两种全网最实用且详细的写法
92 0
|
10月前
|
前端开发
解决.NET Core Ajax请求后台传送参数过大请求失败问题
解决.NET Core Ajax请求后台传送参数过大请求失败问题
|
10月前
|
前端开发 数据可视化 JavaScript
ajax刷新php后台实现定时任务的执行解决方案
ajax刷新php后台实现定时任务的执行解决方案
73 0
|
11月前
|
JSON 前端开发 Java
使用ajax往后台传输json数据SpringMVC的RequestBody自动转换 前端控制器报400错误
使用ajax往后台传输json数据SpringMVC的RequestBody自动转换 前端控制器报400错误
|
11月前
|
XML JSON 前端开发
Qt+QtWebApp开发笔记(五):http服务器html中使用json触发ajax与后台交互实现数据更新传递
前面完成了页面的跳转、登录,很多时候不刷新页面就想刷新局部数据,此时ajax就是此种技术,且是异步的。   本篇实现网页内部使用js调用ajax实现异步交互数据。   在js中使用 ajax是通过XMLHttpRequest来实现的。
|
JSON 前端开发 Java
【Java框架型项目从入门到装逼】第六节 - 用ajax请求后台数据
【Java框架型项目从入门到装逼】第六节 - 用ajax请求后台数据