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结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
Apr 27 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
Jun 19 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
Jul 31 Javascript
深入研究React中setState源码
Nov 17 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
Nov 20 Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 30 Javascript
vue 实现路由跳转时更改页面title
Nov 05 Javascript
Nuxt页面级缓存的实现
Mar 09 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
Oct 24 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中使用PDF文档功能
2006/10/09 PHP
php eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
php生成短域名函数
2015/03/23 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
window.ActiveXObject使用说明
2010/11/08 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
Python中操作MySQL入门实例
2015/02/08 Python
Python实现快速多线程ping的方法
2015/07/15 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
浅析PEP572: 海象运算符
2019/10/15 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
泰国第一在线超市:Tops
2021/02/13 全球购物
区域销售经理岗位职责
2013/12/10 职场文书
会计电算化专业毕业生推荐信
2013/12/24 职场文书
交通事故检查书范文
2014/01/30 职场文书
党风廉政承诺书
2014/03/27 职场文书
消防安全责任书
2014/04/14 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
联村联户简报
2015/07/21 职场文书