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 相关文章推荐
jquery animate图片模向滑动示例代码
Jan 26 Javascript
js实现图片旋转的三种方法
Apr 10 Javascript
再谈javascript原型继承
Nov 10 Javascript
JavaScript操作表单实例讲解(上)
Jun 20 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
Aug 23 Javascript
vuejs实现本地数据的筛选分页功能思路详解
Nov 15 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
Feb 08 Javascript
Vuex 使用及简单实例(计数器)
Aug 29 Javascript
微信小程序如何刷新当前界面的实现方法
Jun 07 Javascript
前端Electron新手入门教程详解
Jun 21 Javascript
vue使用i18n实现国际化的方法详解
Sep 05 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
Apr 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中static,const与define的使用区别
2013/06/18 PHP
PHP模板引擎Smarty内置变量调解器用法详解
2016/04/11 PHP
yii2实现 &quot;上一篇,下一篇&quot; 功能的代码实例
2017/02/04 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
jQuery学习笔记之Helloworld
2010/12/22 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
JS获取键盘上任意按键的值(实例代码)
2013/11/12 Javascript
Javascript 按位取反运算符 (~)
2014/02/04 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
2017/03/29 Javascript
用JavaScript做简易的购物车的代码示例
2017/10/20 Javascript
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
vue keep-alive的简单总结
2021/01/25 Vue.js
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
介绍Python的Django框架中的QuerySets
2015/04/20 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
python logging通过json文件配置的步骤
2020/04/27 Python
大学团日活动新闻稿
2014/09/10 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
go语言求任意类型切片的长度操作
2021/04/26 Golang
PHP遍历数组的6种方式总结
2021/11/17 PHP
Redis超详细讲解高可用主从复制基础与哨兵模式方案
2022/04/07 Redis
vue如何清除浏览器历史栈
2022/05/25 Vue.js