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 相关文章推荐
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
JS 非图片动态loading效果实现代码
Apr 09 Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
Dec 13 Javascript
bootstrap轮播图示例代码分享
May 17 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 Javascript
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
微信小程序封装自定义弹窗的实现代码
May 08 Javascript
JS异步处理的进化史深入讲解
Aug 25 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
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
php获取远程文件大小
2015/10/20 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
javascript闭包入门示例
2014/04/30 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
python常用知识梳理(必看篇)
2017/03/23 Python
python好玩的项目—色情图片识别代码分享
2017/11/07 Python
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
python使用OpenCV模块实现图像的融合示例代码
2020/04/10 Python
python批量修改交换机密码的示例
2020/09/22 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
应届生体育教师自荐信
2013/10/03 职场文书
行为习惯主题班会
2015/08/14 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang
详解Javascript实践中的命令模式
2021/05/05 Javascript
教你用python控制安卓手机
2021/05/13 Python
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL
Python制作动态字符画的源码
2021/08/04 Python
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫