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 Base64编码和解码,实现URL参数传递。
Sep 18 Javascript
利用jquery的获取JS文件中的字符串内容
Feb 14 Javascript
jQuery easyui datagrid动态查询数据实例讲解
Feb 26 Javascript
jquery click([data],fn)使用方法实例介绍
Jul 08 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
JS中跳出循环的示例代码
Sep 14 Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 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
非常不错的MySQL优化的8条经验
2008/03/24 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
简单谈谈PHP中的trait
2017/02/25 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
Javascript 面向对象 对象(Object)
2010/05/13 Javascript
JavaScript去掉空格的方法集合
2010/12/28 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
2011/01/12 Javascript
jquery连缀语法如何实现
2012/11/29 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
JS实现异步上传压缩图片
2017/04/22 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
Vue常见面试题整理【值得收藏】
2018/09/20 Javascript
微信小程序云开发之数据库操作
2019/05/18 Javascript
js事件触发操作实例分析
2019/06/21 Javascript
python解析html开发库pyquery使用方法
2014/02/07 Python
Python深入学习之装饰器
2014/08/31 Python
python中的多重继承实例讲解
2014/09/28 Python
深入Python函数编程的一些特性
2015/04/13 Python
Python中super的用法实例
2015/05/28 Python
Python中字典和集合学习小结
2017/07/07 Python
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
如何用python 操作zookeeper
2020/12/28 Python
CSS3实现div从下往上滑入滑出效果示例
2020/04/28 HTML / CSS
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
yy婚礼司仪主持词
2014/03/14 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs