Jquery+asp.net后台数据传到前台js进行解析的方法

所以在解析后台数据的时候,我们需要根据后台的数据情况,特殊处理和对待。

我这里后台用的是asp.net提供的wcf服务,也有ashx一般处理程序。大致原理差不多。

C#中我们经常用的对象,有实体对象比如:User;有List集合,一般为返回列表。

复杂点的还有对象嵌套对象或者list集合的。不过没什么差别,只要看你的数据多少来决定是由js处理数据,

还是后台处理了直接返回最终结果。

1、实体对象:返回是对象的话,在js中,直接就是和你后台代码类中的对象数据是一样的。

比如下面代码,就是获取到一个对象。直接用它的name属性就可以获取到。

代码如下:

$.ajax({
type: "post",
dataType: "json", traditional: true,
data: { oper: "edit", sid: id },
url: AjaxUrl,
success: function (data, textStatus) {
if (data != null) {
if (data) {
$("#name").val(data.Name); 获取到对象了。
SetSelectOpertionValue("selectRelation", data.Relation);
SetSelectOpertionValue("selectaddreason", data.Reason);
} else {
$("#btnAdd").attr("disabled", false); $("#btnAdd").text("编辑");
}
}
},
complete: function
(XMLHttpRequest, textStatus) {
},
error: function
(e) {
$("#btnAdd").attr("disabled", false); $("#btnAdd").text("编辑");
}
});

2、返回数据是List集合,包含一些对象:这应用场景也很多。

在js中,对应的一个array数组。数组中是你返回的对象实体。可以采用each遍历。具体可以参考:

[Jquery操作js数组及对象示例]

demo:

代码如下:

$.ajax({             type: "post",
            dataType: "json", traditional: true,
            data: { oper: "list", lc: ID,nm:$("#searchname").val() },
            url:sAjaxUrl,
            success: function (data, textStatus) {                 if (data != null) {
                    if (data.Instance==null &data.Instance.length==0) {                         return;
                    }
                    else {                           
                        var datalist = data.Instance;                         if (sort == 1) {                              datalist = datalist.sort(
                                        function (a, b) {                                               
                                            return (a.Id - b.Id);                                         }
                                    );
                        } else {                             datalist = datalist.sort(
                                       function (a, b) {                                            return (b.Id - a.Id);                                        }
                                   );
                        }
                        var html = "";
                        //绑定数据到table
                        var tabledata = GetJson(datalist);                         
                    }
                }
            },
            complete: function (XMLHttpRequest, textStatus) {             },
            error: function (e) {                   
            }
        });

代码如下:

<script type="text/javascript">
//假如返回的是:
var json = "['2010-4-2','2010-4-1','2010-5-2']";
var dateArray = eval(json);
for(i in dataArray)
{
   document.write(dataArray[i]);
}
</script>

或者:

代码如下:

$.each(data.comments, function(i, item) {
            $("#info").append(
                    "<div>" + item.id + "</div>" +
                    "<div>" + item.nickname    + "</div>" +
                    "<div>" + item.content + "</div><hr/>");
        });

3、如果是复杂嵌套的话,也是对象了。js中会完全和后台对应。你遍历即可。

现在很多时候,后台返回给前台一般都是用json了。json在js中可以直接解析成对象。

(0)

相关推荐

  • asp.net+jquery滚动滚动条加载数据的下拉控件

    这样的需求貌似自己感觉不是很合理,因为数据多了如此下拉无论从人还是机器操作都比较痛苦. 没办法由于需求下来了,只能按需求操作.网上找了很多相关控件都感觉有点庞大,占资源比较多.没办法自己花半天时间弄出个半成品自定义控件,拿出来分享下,如有高手看了请多指点. 需求:AJAX滚动滚动条加载数据的下拉列表 控件名称:Webcombo 所用技术:ASP.NET(C#),jQuery,ASP.NET一般处理文件(.ashx) 下拉列表具体实现:用DIV模拟下拉列表,input和图片模拟下拉框.最终结果如下

  • asp.net下 jquery jason 高效传输数据

    Default.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>test2<

  • Asp.net利用JQuery弹出层加载数据代码

    首先我们新建一个网站,在网站里面新增一般处理程序,命名为ReadData.ashx.然后在里面输入如下代码: 复制代码 代码如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; using System.Data.SqlClient; //引入命名空间 using System.Data; namespace 加载层 {

  • 使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇

    调用jQuery的ajax方法时,jQuery会根据post或者get协议对参数data进行序列化; 如果提交的数据使用复杂的json数据,例如: {userId:32323,userName:{firstName:"李",lastName:"李大嘴"}} 那么服务器是无法正常接收到完整的参数,因为jQuery对data的序列化,是使用了键值对拼装的方式; 参数拼装成 userId=32323&userName=object ; userName所指向的对象

  • Jquery.TreeView结合ASP.Net和数据库生成菜单导航条

    下面的例子将结合项目实际运用来使用Jquery.TreeView,当然在使用控件树需要现在相应的js文件 下面就把我生成的TreeView展现给大家看看希望对大家有所帮助!在使用之前需要下载控件树的js文件和Css样式 介绍一下表结构 M_ID M_Name M_ParentID M_URL M_Sort 然后新建一个网站,在新建的网站下添加CSS文件夹和js文件夹分别用于存放Css样式和JS,同时再添加一个image文件夹用于存放TreeView的图片 接着我们就开始实现我们的功能了! 前台代

  • JQuery对ASP.NET MVC数据进行更新删除

    以前学习ASP.NET MVC时,学习与应用,操作过数据显示,添加,编辑,更新和删除等功能. 很多方法是相通的,看自己是怎样来进行方便,快捷,高效率. 今天Insus.NET写的练习,是直接对绑定在Table的数据进行更新,删除. 在项目中,创建一个实体,也就是说,对数据库时行通信,对数据进行操作: public IEnumerable<ToolLocation> GetAllToolLocations() { sp.ConnectionString = DB.ConnectionString

  • asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)

    自从腾讯微博上线以来,基本上就开始用了,一直到现在,作为一个开发人员,也看到了腾讯微博一直在不停的改变,也不知道大家有没有发现,腾讯微博提供两种加载数据的方式,一种是分页,一种是滚动浏览器滚动条加载数据,分页功能我想大家都做得太多了,今天我与大家分享一下我用滚动条滚动加载数据下面开讲: 首先说一下思路,我用的是Jquery,然后通过Jquery的ajax()方法通过 HTTP 请求加载远程数据来实现的,用到Jquery,首先要应用jquery.min.js类库,如果本地没有,也可以直接引用下面地

  • asp.net jquery+ajax异步刷新实现示例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title

  • jquery.Ajax()方法调用Asp.Net后台的方法解析

    利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法.先来个简单的实例热热身吧. 1.无参数的方法调用asp.net code: 复制代码 代码如下: using System.Web.Script.Services; [WebMethod]   public static string SayHello()   {        return "Hello Ajax!";   }  using System.Web.Script.Services; [WebMe

  • asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxJson.aspx.cs" Inherits="AjaxJson" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

随机推荐