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 相关文章推荐
网上应用的一个不错common.js脚本
Aug 08 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
Aug 22 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 Javascript
JS动态给对象添加事件的简单方法
Jul 19 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
Feb 08 Javascript
使用Node.js实现简易MVC框架的方法
Aug 07 Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
this.$toast() 了解一下?
Apr 18 Javascript
微信小程序动态设置图片大小的方法
Nov 21 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微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
WordPress网站性能优化指南
2015/11/18 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
2012/02/27 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
2016/07/18 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
浅谈js获取ModelAndView值的问题
2018/03/28 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
Python求解平方根的方法
2015/03/11 Python
python关闭windows进程的方法
2015/04/18 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
Python笔记之工厂模式
2019/11/20 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
python判断变量是否为列表的方法
2020/09/17 Python
手把手教你从PyCharm安装到激活(最新激活码),亲测有效可激活至2089年
2020/11/25 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
法律工作求职自荐信
2013/10/31 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
导游词格式
2015/02/13 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
python基础之文件处理知识总结
2021/05/23 Python
Java实现房屋出租系统详解
2021/10/05 Java/Android
SQL Server查询某个字段在哪些表中存在
2022/03/03 SQL Server