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 中令人困惑的变量赋值
Aug 13 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
JavaScript创建一个object对象并操作对象属性的用法
Mar 23 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 Javascript
关于JS变量和作用域详解
Jul 28 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
p5.js实现斐波那契螺旋的示例代码
Mar 22 Javascript
小程序实现人脸识别功能(百度ai)
Dec 23 Javascript
微信小程序实现的自定义分享功能示例
Feb 12 Javascript
javascript实现简易聊天室
Jul 12 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中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
Web程序工作原理详解
2014/12/25 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
基于JavaScript实现回到页面顶部动画代码
2016/05/24 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
angular中的post请求处理示例详解
2020/06/30 Javascript
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
python如何将图片转换为字符图片
2020/08/19 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
对pandas处理json数据的方法详解
2019/02/08 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
办护照工作证明范本
2014/01/14 职场文书
旷课检讨书2000字
2014/01/14 职场文书
会议邀请书范文
2014/02/02 职场文书
公司营业员的自我评价
2014/03/04 职场文书
公司寄语大全
2014/04/10 职场文书
《小猪家的桃花树》教学反思
2014/04/11 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
员工升职自荐信
2015/03/27 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
MySQL root密码的重置方法
2021/04/21 MySQL