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实现合并多个数组示例
Sep 21 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
Apr 10 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
JavaScript实现图片轮播的方法
Jul 31 Javascript
浅谈javascript中关于日期和时间的基础知识
Jul 13 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
jquery插件锦集【推荐】
Dec 16 Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
Flutter实现仿微信底部菜单栏功能
Sep 18 Javascript
vue3.0实现插件封装
Dec 14 Vue.js
如何防止回车(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
深入理解require与require_once与include以及include_once的区别
2013/06/05 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
教大家制作简单的php日历
2015/11/17 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
浅谈sass在vue注意的地方
2017/08/10 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
Django csrf 验证问题的实现
2018/10/09 Python
python实现猜拳小游戏
2020/04/05 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
基于python实现把图片转换成素描
2019/11/13 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
Python 图片处理库exifread详解
2021/02/25 Python
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
澳大利亚香水在线商店:City Perfume
2020/09/02 全球购物
迟到检讨书1000字
2014/01/15 职场文书
自行车租赁公司创业计划书
2014/01/28 职场文书
启动仪式策划方案
2014/06/14 职场文书
文案策划专业自荐信
2014/07/07 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
户外拓展训练感想
2015/08/07 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS