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 相关文章推荐
推荐10个2014年最佳的jQuery视频插件
Nov 12 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
Sep 16 Javascript
Javascript中字符串replace方法的第二个参数探究
Dec 05 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
Aug 09 Javascript
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
详解Vue2 添加对scss的支持
Jan 02 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 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将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】
2017/06/07 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
jQuery 性能优化指南(3)
2009/05/21 Javascript
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
JS对象转换为Jquery对象示例
2014/01/26 Javascript
Jquery倒计时源码分享
2014/05/16 Javascript
js处理表格对table进行修饰
2014/05/26 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
2016/07/09 Javascript
D3.js实现折线图的方法详解
2016/09/21 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
利用vue实现模态框组件
2016/12/19 Javascript
JS常用知识点整理
2017/01/21 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
详解python中requirements.txt的一切
2017/03/03 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
python如何查看微信消息撤回
2018/11/27 Python
python sorted函数的小练习及解答
2019/09/18 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
药剂学专业应届生自荐信
2013/09/29 职场文书
小学教师国培感言
2014/02/08 职场文书
环境保护标语
2014/06/20 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
2015年重阳节主持词
2015/07/04 职场文书
村主任当选感言
2015/08/01 职场文书
少先队中队工作总结
2015/08/14 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
Redis主从配置和底层实现原理解析(实战记录)
2021/06/30 Redis
MySQL 数据库范式化设计理论
2022/04/22 MySQL