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


Posted in Javascript onMay 11, 2014

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

我这里后台用的是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中可以直接解析成对象。

Javascript 相关文章推荐
基于JQuery的Pager分页器实现代码
Jul 17 Javascript
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
基于jquery的web页面日期格式化插件
Nov 15 Javascript
js控制frameSet示例
Sep 10 Javascript
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
jquery彩色投票进度条简单实例演示
Jul 23 Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 Javascript
详解vue-admin和后端(flask)分离结合的例子
Feb 12 Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 Javascript
解决Can't find variable: SockJS vue项目的问题
Sep 22 Javascript
Vue接口封装的完整步骤记录
May 14 Vue.js
如何防止回车(enter)键提交表单
May 11 #Javascript
js取整数、取余数的方法
May 11 #Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
May 11 #Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
May 11 #Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
May 11 #Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 #Javascript
jquery 按键盘上的enter事件
May 11 #Javascript
You might like
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
2020/08/17 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
jQuery 开天辟地入门篇一
2009/12/09 Javascript
web页面数据展示新想法(json)
2010/06/08 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
2017/08/04 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
JavaScript中Require调用js的实例分享
2017/10/27 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
详细分析python3的reduce函数
2017/12/05 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
详解Python中的正则表达式
2018/07/08 Python
使用Python读取二进制文件的实例讲解
2018/07/09 Python
代码详解django中数据库设置
2019/01/28 Python
python web框架中实现原生分页
2019/09/08 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
应届实习生的自我评价范文
2014/01/05 职场文书
双方协议书
2014/04/22 职场文书
勾股定理课后反思
2014/04/26 职场文书
开学典礼致辞
2015/07/29 职场文书
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python
nginx设置资源请求目录的方式详解
2022/05/30 Servers