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 checkbox全选/取消全选实现代码
Nov 14 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
May 23 Javascript
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
用jquery.sortElements实现table排序
May 04 Javascript
jQuery中的Deferred和promise 的区别
Apr 03 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
vue组件与复用详解
Apr 08 Javascript
layer扩展打开/关闭动画的方法
Sep 23 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 Javascript
node+multer实现图片上传的示例代码
Feb 18 Javascript
如何防止回车(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
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
Laravel 实现关系模型取出需要的字段
2019/10/10 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
Script的加载方法小结
2011/01/12 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
2014/11/23 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
ASP.NET jquery ajax传递参数的实例
2016/11/02 Javascript
JS实现双击内容变为可编辑状态
2017/03/03 Javascript
使用Bootstrap打造特色进度条效果
2017/05/02 Javascript
简单谈谈axios中的get,post方法
2017/06/25 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
2017/11/11 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
JS中的变量作用域(console版)
2020/07/18 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
python下如何让web元素的生成更简单的分析
2008/07/17 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
Python实现随机创建电话号码的方法示例
2018/12/07 Python
详解python:time模块用法
2019/03/25 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
党员志愿者活动总结
2014/06/26 职场文书
房产转让协议书(2014版)
2014/09/30 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
高二英语教学反思
2016/03/03 职场文书
PHP基本语法
2021/03/31 PHP