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与webservice的通信实现代码
Dec 25 Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 Javascript
js点击返回跳转到指定页面实现过程
Aug 20 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 Javascript
spirngmvc js传递复杂json参数到controller的实例
Mar 29 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
vue实现多条件和模糊搜索功能
May 28 Javascript
微信小程序如何访问公众号文章
Jul 08 Javascript
vue 避免变量赋值后双向绑定的操作
Nov 07 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基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
php中error与exception的区别及应用
2014/07/28 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
2016/09/26 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
Angular2入门教程之模块和组件详解
2017/05/28 Javascript
ionic 自定义弹框效果
2017/06/27 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
python中hashlib模块用法示例
2017/10/30 Python
浅谈python数据类型及类型转换
2017/12/18 Python
详解Python中的正则表达式
2018/07/08 Python
python3.x 将byte转成字符串的方法
2018/07/17 Python
Python中qutip用法示例详解
2020/10/02 Python
JSF界面控制层技术
2013/06/17 面试题
无工作经验者个人求职信范文
2013/12/22 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
违纪开除通知书
2015/04/25 职场文书
搭讪开场白台词大全
2015/05/28 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书
Python Parser的用法
2021/05/12 Python
Feign调用全局异常处理解决方案
2021/06/24 Java/Android
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python