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中:checkbox选择器用法实例
Jan 03 Javascript
JavaScript必知必会(七)js对象继承
Jun 08 Javascript
jQuery 3.0十大新特性
Jul 06 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
AngularJS之依赖注入模拟实现
Aug 19 Javascript
js正则表达式验证密码强度【推荐】
Mar 03 Javascript
pm2 部署 node的三种方法示例
Oct 20 Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
使用Angular CLI进行单元测试和E2E测试的方法
Mar 24 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
Sep 18 Javascript
纯js实现无缝滚动功能代码实例
Feb 21 Javascript
JavaScript监听一个DOM元素大小变化
Apr 26 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
在apache下限制每个虚拟主机的并发数!!!!
2006/10/09 PHP
整合了前面的PHP数据库连接类~~做成一个分页类!
2006/11/25 PHP
php实现图片添加水印功能
2014/02/13 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
PHP整合七牛实现上传文件
2015/07/03 PHP
php实现递归的三种基本方式
2020/07/04 PHP
推荐:极酷右键菜单
2006/11/29 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
javascript性能优化之DOM交互操作实例分析
2015/12/12 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
前端页面文件拖拽上传模块js代码示例
2017/05/19 Javascript
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
JS路由跳转的简单实现代码
2017/09/21 Javascript
vue实现2048小游戏功能思路详解
2018/05/09 Javascript
vue实现动态按钮功能
2019/05/13 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
vue登录注册实例详解
2019/09/14 Javascript
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
python中xrange用法分析
2015/04/15 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
python里 super类的工作原理详解
2019/06/19 Python
Django 重写用户模型的实现
2019/07/29 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
python regex库实例用法总结
2021/01/03 Python
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
军训的自我鉴定
2013/12/10 职场文书
班班通校本培训方案
2014/03/12 职场文书
会员卡清退活动总结
2014/08/27 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
HTML5页面打开微信小程序功能实现
2022/09/23 HTML / CSS