JQuery ajax返回JSON时的处理方式 (三种方式)

最近在使用JQuery的ajax方法时，要求返回的数据为json数据，在处理的过程中遇到下面的几个问题，那就是采用不同的方式来生成json数据的时候，在$.ajax方法中应该是如何来处理的，下面依次来进行说明，由于本人使用的是asp.net，所以处理的页面都是采用.net来做的！其他的方式应该是相同的吧

一、JSON的一些基础知识。

JSON中对象通过“{}”来标识，一个“{}”代表一个对象，如{“AreaId”:”123”}，对象的值是键值对的形式（key：value）。

“[]”，标识数组，数组内部各个数据之间通过“，”分割，如[“AreaId”:”123”，”AreaId”:”345”]。

很多情况下是对象数组，那就是这样：

[{“AreaId”:”123”},{“AreaId”:”345”}]

其实数组也是一个对象，上面的格式也可以写成这样：

{“Area”：[{“AreaId”:”123”},{“AreaId”:”345”}]}

这表示一个Area对象，他有两个子数据，每个子数据也是一个对象，每个子对象都是AreaId。

JSON中字符串和字符的定义格式和一般的类C语言定义是类似的，双引号定义字符串，单引号定义字符。

JSON的键（Key）用双引号括起来，比如上面的“Area“和”AreaId“，都是用双引号括起来的，在一些语言中构造JSON字符串的时候，可以使用转义字符转义双引号。

首先给出要传的json数据：[{"demoData":"This Is The JSON Data"}]

1,使用普通的aspx页面来处理      

本人觉得这种方式处理起来是最简单的了,看下面的代码吧

$.ajax({
 type: "post",
url: "Default.aspx",
dataType: "json",
success: function (data) {
$("input#showTime").val(data[0].demoData);
 },
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
 }
});

这里是后台传递数据的代码

Response.Clear();
Response.Write("[{\"demoData\":\"This Is The JSON Data\"}]");
Response.Flush();
Response.End();

这种处理的方式将传递过来的数据直接解析为json数据，也就是说这里的前台js代码可能直接把这些数据解析成json对象数据，而并非字符串数据，如data[0].demoData，

这里就直接使用了这个json对象数据

2,使用webservice(asmx)来处理这种处理方式就不会将传递过来的数据当成是json对象数据，而是作为字符串来处理的，如下代码

$.ajax({
type: "post",
url: "JqueryCSMethodForm.asmx/GetDemoData",
dataType: "json",/*这句可用可不用，没有影响*/
contentType: "application/json; charset=utf-8",
success: function (data) {
$("input#showTime").val(eval('(' + data.d + ')')[0].demoData);
//这里有两种对数据的转换方式，两处理方式的效果一样//$("input#showTime").val(eval(data.d)[0].demoData);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});

下面这里为asmx的方法代码[WebMethod]

public static string GetDemoData() {
return "[{\"demoData\":\"This Is The JSON Data\"}]";
}

这里的这种处理方式就把传递回来的json数据当成了字符串来处理的，所在就要对这个数据进行eval的处理，这样才能成为真正的json对象数据，

3,使用ashx文件来处理这种方式和普通的aspx的页面处理是一样的所以这里就不多做解释了！

赞 (0)

相关推荐

  • 详解JavaScript中jQuery和Ajax以及JSONP的联合使用

    借助于 XMLHttpRequest,浏览器可以在整个页面不刷新的情况下与服务端进行交互,这就是所谓的 Ajax(Asynchronous JavaScript and XML).Ajax 可以为用户提供更为丰富的用户体验. Ajax 请求由 JavaScript 驱动,通过 JavaScript 代码向 URL 发送一个请求,待服务端有响应时会触发一个回调函数,可以在这里回调函数里面处理服务端返回的信息.由于整个发送请求和响应的过程是异步的,所以在此期间页面中其它 Javascript 代码仍

  • 使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页

    使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页

    先给大家展示下运行效果图:  1.后台action产生json数据. List blackList = blackService.getBlackInfoList(mobileNum, gatewayid, startDate, endDate); int totalRows = blackList.size(); StringBuffer sb = new StringBuffer(); sb.append("{\"totalCount\":\""+to

  • Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中

    Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中

    复制代码 代码如下: $("#div").bindTemplate({ source : json object, template : null | $("#template") | "<div>{{object}}</div>", dateFormat : "d.m.y", tagOpen : "{{", tagClose : "}}" }); bindTem

  • JQuery ajax 返回json时出现中文乱码该如何解决

    使用jQuery ajax调用的返回json,中文乱码问题 Js代码如下: $.ajax({ url: '/test/testAction.do?method=test', type: 'POST', dataType: 'json', timeout: 5000, async: false, error: function(){ alert('获取数据失败!'); }, success: function(json){ jsObject = eval(json); } }); return j

  • 基于jQuery的AJAX和JSON实现纯html数据模板

    基于jQuery的AJAX和JSON实现纯html数据模板

    通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的数据,然后通过jQuer把数据绑定到事先设计好的html模板上,直接在页面上显示. 我们先来看一下html模板: <table id="datas" border="1" cellspacing="0" style="border-collapse: collapse"> <tr> <th> 订单ID</th> &

  • jQuery通过Ajax向PHP服务端发送请求并返回JSON数据

    jQuery通过Ajax向PHP服务端发送请求并返回JSON数据

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.JSON在前后台交互的过程中发挥着相当出色的作用. 服务端PHP读取MYSQL数据,并转换成JSON数据,传递给前端Javascript,并操作JSON数据.本文将通过实例演示了jQuery通过Ajax向PHP服务端发送请求并返回JSON数据.阅读本文的读者应该具备jQuery.Ajax.PHP相关知识,并能熟练运用. XHTML <ul id="use

  • jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表

    对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接     par:ID       sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { $(sel).empty(); $.getJSON(url, { id: par }, function (json, textStatus) { for (var i = json.length - 1; i >= 0; i--

  • JQuery ajax返回JSON时的处理方式 (三种方式)

    最近在使用JQuery的ajax方法时,要求返回的数据为json数据,在处理的过程中遇到下面的几个问题,那就是采用不同的方式来生成json数据的时候,在$.ajax方法中应该是如何来处理的,下面依次来进行说明,由于本人使用的是asp.net,所以处理的页面都是采用.net来做的!其他的方式应该是相同的吧 一.JSON的一些基础知识. JSON中对象通过"{}"来标识,一个"{}"代表一个对象,如{"AreaId":"123"}

  • 命令行运行Python脚本时传入参数的三种方式详解

    如果在运行python脚本时需要传入一些参数,例如gpus与batch_size,可以使用如下三种方式. python script.py 0,1,2 10 python script.py -gpus=0,1,2 --batch-size=10 python script.py -gpus=0,1,2 --batch_size=10 这三种格式对应不同的参数解析方式,分别为sys.argv, argparse, tf.app.run, 前两者是python自带的功能,最后一个是tensorfl

  • C#中对象与JSON字符串互相转换的三种方式

    C#中对象与JSON字符串互相转换的三种方式

    JSON(JavaScriptObject Notation, JS 对象标记) 是一种轻量级的数据交换格式. 关于内存对象和JSON字符串的相互转换,在实际项目中应比较广泛,经过一番搜索,找到如下三种方法来解决此问题 分别是使用Newtonsoft.Json.dll.DataContractJsonSerializer.JavaScriptSerializer. 方法一:Newtonsoft.Json.dll Newtonsoft.Json.dll在.net2.0之后的版本可以支持 我的版本.

  • Java中Elasticsearch 实现分页方式(三种方式)

    目录 ES 简介 ES 的特点: 一.from + size 浅分页 二.scroll 深分页 scroll删除 三.search_after 深分页 ES 简介 Elasticsearch 是一个基于 Lucene 实现的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful web 接口.Elasticsearch是用Java语言开发的,并作为Apache许可条款下的开放源码发布,是一种流行的企业级搜索引擎.Elasticsearch用于云计算中,能够达到实时搜索,稳定

  • JQuery处理json与ajax返回JSON实例代码

    一.JSON的一些基础知识. JSON中对象通过"{}"来标识,一个"{}"代表一个对象,如{"AreaId":"123"},对象的值是键值对的形式(key:value). "[]",标识数组,数组内部各个数据之间通过","分割,如["AreaId":"123","AreaId":"345"]. 很多情况下是

  • 探讨JavaScript中声明全局变量三种方式的异同

    探讨JavaScript中声明全局变量三种方式的异同

    变量及变量声明是一门语言最基本的概念,初学者都会很快掌握.JavaScript中声明变量也是如此,很简单var(关键字)+变量名(标识符). 方式1 var test;var test = 5;需注意的是该句不能包含在function内,否则是局部变量.这是第一种方式声明全局变量. 方式2 test = 5;没有使用var,直接给标识符test赋值,这样会隐式的声明了全局变量test.即使该语句是在一个function内,当该function被执行后test变成了全局变量. 方式3 window

  • Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩）

    在项目中往往会有这样的需求: 弹出框(或Popover)在 show 后,点击空白处可以将其 hide. 针对此需求,整理了三种实现方式,大家按实际情况选择. 当然,我们做项目肯定会用到 UI 框架,常见的 Element 中的组件提供了这样的方法. 但是,就算使用框架,有些时候还是要用到的,比如: Element 中的 Popover,当我们想使用手动方式(trigger 触发方式为 manual时)控制它的 show & hide 的时候,就要自己实现这个功能啦. 第一种方式:最普通的手动监

  • MongoDB中优雅删除大量数据的三种方式

    MongoDB中优雅删除大量数据的三种方式

    目录 为什么要"瘦身"呢? MongoDB中删除数据的三种方式 三种方式的执行效率对比 1. remove 2. deleteMany 3. bulkWrite 通过 Write Concern 规避主从延迟 删除过程中遇到的Bug 总结 删除大量数据,无论是在哪种数据库中,都是一个普遍性的需求.除了正常的业务需求,我们需要通过这种方式来为数据库"瘦身". 为什么要"瘦身"呢? 1.表的数据量到达一定量级后,数据量越大,表的查询性能会越差. 毕竟

  • ASP.NET使用Ajax返回Json对象的方法

    ASP.NET使用Ajax返回Json对象的方法

    一.新建一个html页面,如注册页面"Register.htm" <!DOCTYPE html> <html > <head> <title>用户注册</title> <meta charset="utf-8" /> <style type="text/css"> .msg { color:Red; } </style> </head> &

随机推荐