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中的其他对象
Jan 16 Javascript
De facto standard 世界上不可思议的事实标准
Aug 29 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
仿猪八戒网左下角的文字滚动效果
Oct 28 Javascript
jquery ui dialog实现弹窗特效的思路及代码
Aug 03 Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 Javascript
javascript实现动态标签云
Oct 16 Javascript
值得分享和收藏的Bootstrap学习教程
May 12 Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 Javascript
JavaScript基于对象去除数组重复项的方法
Oct 09 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
Dec 06 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 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
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
JavaScript中的比较操作符&gt;、=、
2014/12/31 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
NodeJs 实现简单WebSocket即时通讯的示例代码
2019/08/05 NodeJs
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
Python的设计模式编程入门指南
2015/04/02 Python
Python字符串替换实例分析
2015/05/11 Python
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
详解python eval函数的妙用
2017/11/16 Python
Python实现连接两个无规则列表后删除重复元素并升序排序的方法
2018/02/05 Python
python删除不需要的python文件方法
2018/04/24 Python
Windows系统Python直接调用C++ DLL的方法
2019/08/01 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
详解Python IO口多路复用
2020/06/17 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
python之pygame模块实现飞机大战完整代码
2020/11/29 Python
python excel多行合并的方法
2020/12/09 Python
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
成龙霸王洗发水广告词
2014/03/14 职场文书
消防安全标语
2014/06/07 职场文书
片区教研活动总结
2014/07/02 职场文书
2014年质量工作总结
2014/11/22 职场文书
文明单位汇报材料
2014/12/24 职场文书
行政前台岗位职责
2015/04/16 职场文书
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python