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 相关文章推荐
你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍
Apr 23 Javascript
javascript强大的日期函数代码分享
Sep 04 Javascript
JavaScript实现的双向跨域插件分享
Jan 31 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 Javascript
JavaScript:Array类型全面解析
May 19 Javascript
window.open打开窗口被拦截的快速解决方法
Aug 04 Javascript
利用Node.js编写跨平台的spawn语句详解
Feb 12 Javascript
JS设计模式之数据访问对象模式的实例讲解
Sep 30 Javascript
js 提取某()特殊字符串长度的实例
Dec 06 Javascript
JavaScript对象的特性与实践应用深入详解
Dec 30 Javascript
javascript实现简易数码时钟
Mar 30 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 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伪造referer实例代码
2008/09/20 PHP
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
奉献出一个封装的curl函数 便于调用(抓数据专用)
2013/07/22 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
Javascript学习笔记之函数篇(六) : 作用域与命名空间
2014/11/23 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
原生js编写2048小游戏
2017/03/17 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
[51:15]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-GAMING
2014/05/22 DOTA
从Python程序中访问Java类的简单示例
2015/04/20 Python
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
python实现mysql的读写分离及负载均衡
2018/02/04 Python
python模块smtplib学习
2018/05/22 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2020/01/04 Python
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
班组长岗位职责范本
2014/01/05 职场文书
工作表扬信的范文
2014/01/10 职场文书
经贸韩语专业大学生职业规划
2014/02/14 职场文书
环境保护标语
2014/06/20 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
小学见习报告
2015/06/23 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS