JQuery ajax返回JSON时的处理方式
ajax最后处理方法
ajax最后处理方法
AJAX技术已经成为现代Web应用程序开发中常用的技术之一。
在使用AJAX时，通常会有许多异步请求需要处理，这就需要使用AJAX的最后处理方法来确保请求处理完成。
AJAX最后处理方法指的是在所有的AJAX请求都已经完成后执行的JavaScript函数。
这个函数通常包含一些针对所有请求的最后处理逻辑，例如更新页面元素、显示成功/错误信息等等。
以下是一些常见的AJAX最后处理方法：
1. jQuery的.ajaxComplete()方法：这个方法会在每个AJAX 请求完成后执行，无论是成功还是失败。
2. jQuery的.ajaxStop()方法：这个方法会在所有AJAX请求完成后执行，无论是成功还是失败。
3. JavaScript的XMLHttpRequest对象的onloadend事件：这个事件会在请求完成后执行，无论是成功还是失败。
4. JavaScript的Promise.all()方法：这个方法可以等待所有Promise对象都完成后执行。
5. JavaScript的async/await关键字：这个方法可以等待所有异步请求全部完成后执行。
需要注意的是，在使用AJAX最后处理方法时，需要考虑请求的顺序和并发性，以及是否需要处理错误信息等问题。
同时，也需要注意不要在该方法中再次发出新的AJAX请求，以免造成请求死循环。
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
四， $复.g制et代JS码O
代码如下:
$.getJSO N("data. $("#getJ S所ON以Re调sp用o 时需要使
);
When Ajax 载入静态 页面 load( url, (dSatraing) (cMaalpl)b(a可ck (Callbac load()方 法可以轻 复制代码
代码如下:
$("#load ing").aj $(t}h)i;s).
全局事件 也 复可制以代帮码
代码如下:
$("#msg" ).before $(t}h)i.sa)j.a xSuccess $(t}h)i.sa)j.a xError(f $}()t;his).
很显然， 第 复三制个代参码
代码如下:
$.ajax({
进一步了 解 前A面JA讨X事论 的一些方 ajaxStar t(全局事 件 be)fo开re始Se n(d局部事 件 a(j全)ax局当Se事一nd 件 s(u局)cc部请es事求s 件 aj)ax请Su求cc e全ss局事件 全 e(r局局ro部的r事请 件 aj)ax仅Er当ro r
全局事件 全 c(o局局mp部的le事发te 件 aj)ax不Co管mp l全et局e事件 全 a(j全局ax局的St事请op 件 局)部当事没件 在之前的 复制代码
代码如下:
$('#ajax 这样， d复at制a.代ht码m
代码如下:
$('#ajax -
实现GET 和POST方 get( url, (dSatraing) (cMaalpl)b(a可ck (Callbac 很显然这 是一个专 复制代码
代码如下:
$.get('l ogin.pihdp
关于使用Ajax请求json数据，@RequestMapping返回中文乱码的几种解决办法
关于使⽤Ajax请求json数据，@RequestMapping返回中⽂乱码的⼏种解决办法⼀、问题描述： 使⽤ajax请求json数据的时候，⽆论如何返回的响应编码都是ISO-8859-1类型，因为统⼀都是utf-8编码，导致出现返回结果中⽂乱码情况。
1 $.ajax({2 type:"post",3 url:"http://...",4 data:JSON.stringify(data),5 dataType:"json",6 contentType:"application/json;charset=utf-8",7 success:function(data){8//9 },10 error:function(data){11//12 }13 }) 返回结果类型：⼆、原因： 使⽤了SpringMVC框架的@RequestBody 和 @ResponseBody两个注解，分别完成请求对象到对象响应的过程，⼀步到位，但是因为Spring3.x以后有了HttpMessageConverter消息转换器，把返回String类型的数据编码全部默认转换成iso-8859-1的编码格式，所以就出现了我们遇到的乱码的情况，如返回list或其它则使⽤ MappingJacksonHttpMessageConverter。
三、解决办法： 根据遇到的问题总结了三种可⾏的⽅案： 1.⼿动设置响应的的Content-type属性：1 @RequestMapping(value = "/next_page.action",method = RequestMethod.POST,produces = {"text/html;charset=utf-8"}) 直接设置返回的属性，这样有个不好的地⽅是，每个⽅法都要写⼀次produces，⽐较⿇烦。
JQuery中的AJAX详解
JQuery中的AJAX详解目录(?)[-]load()方法load(url,[data],[callback])url为被加载的页面地址data表示发送到服务器的数据，格式为key/valuecallback格式为：function(responseText,textStatus,XMLHttpRequest){ }//responseText:请求返回的内容//textStatus:请求状态：success、error、notmodified、timeout这4种//XMLHttpRequest:XMLHttpRequest对象load()方法的传递方式根据参数data来自动指定。
如果没有参数传递，则采用GET方式传递；反之，则自动转换为POST 方式[javascript]view plaincopyprint?1.$("#div1").load(2."jsp/feed.jsp", //如果为" jsp/feed.jsp .filterClass"，则表示获取jsp页面中类名为filterClass的全部元素3.{4. name ：clf, age : 255.//经测试，变量名加引号、单引号、不加引号，后台都能取到值6.//如果含有中文，必须用encodeURI()进行编码，然后再服务器端用decodeURI()解码即可，如7.// {name:encodeURI($("#uName").val()),"password":$("#uPassword").val()},8.}, //也可以用数组传值，{"attr []",["clf","25","male"]}9.function (){10. $("#div2").text("AJAX");11.}12.);[javascript]view plaincopyprint?1.$("div").load("wrongname.xml",function(response,status,xhr){2.if (status=="success")3. {4. $("div").html("<ol></ol>");5. $(response).find("artist").each(function(){6. <span style="white-space:pre"> </span>varitem_text = $(this).text();7. <span style="white-space:pre"> </span>$('<li></li>').html(item_text).appendTo('ol');8. <span style="white-space:pre"> </span> });9. }10.else11. {12. $("div").html("Anerror occured: <br/>" + xhr.status + " " + xhr.statusText)13. }14. });getJSON()方法getJSON(url,[data],[callback])callback格式为function(data,textStatus) { }data是一个返回的json对象[javascript]view plaincopyprint?1.$.getJSON("test.js",{ name: "John", time: "2pm" }, function(json){2. alert("JSON Data: " +ers[3].name);3.});getScript()方法getScript(url,[callback])callback格式为function(response,status)response - 包含来自请求的结果数据status - 包含请求的状态（"success","notmodified", "error", "timeout" 或"parsererror"）通过此函数注入的脚本会自动执行get()方法get(url,data,callback(response,status,xhr),dataType)dataType可能的类型："xml"、"html" 、"text"、"script"、"json"、"jsonp"get() 方法通过远程HTTPGET 请求载入信息。
jQuery操作Ajax和Json
jQuery操作Ajax和Json嗯，自己学SSH和做项目也已有两个月了。
自己今天来整理一下自己在项目中利用jQuery操作过的Ajax和Json。
当时我对于jQuery操作Ajax几乎不怎么了解，但是项目中有需求，所以自己也是必须要去使用，因此现在来详细讲解一下自己在项目中的操作。
功能中，有一个下拉框，里面存储的是服务商的信息，首选项是“--请选择--”，当我选择第一个下拉框中服务商信息之后，后面紧接着将会得到这个选定的服务商下的所有产品。
做一个联动操作。
虽然我不会用jQuery操作Ajax，但是我第一反应就是想到利用这块技术，于是自己就开始查找对应的资料了。
首先，我在Action中，将服务商的信息从数据库查找出来，保存到List集合中，将集合转发到JSP界面上，利用的是struts2标签：<div><s:select name="provider.iscenicid"list="#request.providerList"listKey="i scenicid"listValue="szcenicname"headerKey=""headerValue="--请选择"onchange="onChangeOptionScenic(this)"id="scenicType"/></s:select><span id="productInfo"></span></div>（ps:其实这个里面，本不应该设置headerKey和headerValue，应该在Action中在List集合中去增加一行再进行操作。
）中间的span标签就是将要利用jQuery操作Ajax把产品信息增加到span标签里面！其次，进行jQuery操作Ajax了：<script>function onChangeOptionScenic(_this) {// 获取下拉框中的listKey值var iscenic =$(_this).val();// 设置一个变量，来进行下面的操作var htmltv ="";// 设置URL地址var url ="/tips/travelmessage.action";// Ajax操作开始$.ajax ({// 设定URLurl : url,// 设置提交方式，这里为posttype : "post",// 设置数据类型为JsondataType : "json",// 设置传过去的值的属性名data : {"iscenicid" : iscenic},// 成功返回之后的操作方法success : function(result) {// 获取Action中传回来的result的值var json =eval("("+result+")");// 循环将服务商下的产品以复选框形式拼接出来for(var i=0; i<json.length; i++) {// 将产品信息以复选框形式拼接起来htmltv +="<input type='checkbox' name='productNa me'value='"+json[i].productId+"'/>"+json[i].prod uctName;}// 添加到上面的span标签中$("#productInfo").val(htmltv);}});}</script>最后，将result进行一个映射文件的配置，配置信息如下（根据公司的一些设定而操作）：<action name="travelmessage"class="com.web.system.tips.TravelMessageAction" method="trav elMessage"><result type="json"><param name="root">result</param></result></action>在TravelMessageAction中，需要将内容返回到result中，部分代码如下：List productList = travelMessageService.getProductInfo(product);JSONArray json =new JSONArray().fromObject(productList);result = json.toString();return SUCCESS;至此，一个完整的操作已完成，这就是自己的一点点整理，希望以后有更多的有技术的知识与大家分享！。
通过jquery的ajax请求本地的json文件方法
通过jquery的ajax请求本地的json⽂件⽅法⾃⼰学习jquery的ajax的经历，记录⼀下ajaxTestDemo.html在body⾥⾯放⼀个id为test的div<div id="test"></div>第⼀步还是要先加载jquery⽂件 jquery.min.js<script>$(function(){$.ajax({//请求⽅式为gettype:"GET",//json⽂件位置url:"./data/shuju.json",//返回数据格式为jsondataType: "json",//请求成功完成后要执⾏的⽅法success: function(data){//使⽤$.each⽅法遍历返回的数据date,插⼊到id为#result中var str="<ul>";$.each(data.list,function(i,n){str+="<li>"+n["item"]+"</li>";})str+="</ul>";$("#test").append(str);}});});</script>shuju.json⽂件{"list":[{"item":"审计管理"},{"item":"菜单管理"},{"item":"订单管理"},{"item":"合同管理"},{"item":"物流管理"},{"item":"⾏政管理"},{"item":"⼈事管理"},{"item":"购物管理"},{"item":"批发管理"},{"item":"安全管理"},{"item":"账号管理"},{"item":"财务管理"},{"item":"其他管理"}]}/* json⽂件⾥竟然不能有这样的注释，因为困扰了⼏个⼩时！*/完整的页⾯代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>测试jquey的ajax⽅法</title><style>*{padding:0;margin:0;}#test{padding: 0;margin: 0 auto;width:200px;height: 400px;}#test li{list-style: none;width:200px;text-align: center;height:30px;line-height:30px;border:1px dashed lightgrey;}</style></head><body><div id="test"></div><script src="js/jquery.min.js"></script><script>$(function(){alert(1);$.ajax({//请求⽅式为gettype:"GET",//json⽂件位置url:"./data/shuju.json",//返回数据格式为jsondataType: "json",//请求成功完成后要执⾏的⽅法success: function(data){//使⽤$.each⽅法遍历返回的数据date,插⼊到id为#result中var str="<ul>";$.each(data.list,function(i,n){str+="<li>"+n["item"]+"</li>";})str+="</ul>";$("#test").append(str);}});});</script></body></html>还可以通过$.getJSON来获取本地json⽂件/* getJSON*/$(function(){$.getJSON("./data/shuju.json",function(data){var str="<ul>";$.each(data.list,function(i,n){str+="<li>"+n["item"]+"</li>";})str+="</ul>";$("#test").append(str);});});以上这篇通过jquery的ajax请求本地的json⽂件⽅法就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。
$.ajax使用方法
$.ajax使用方法$.ajax是jQuery中的一个方法，用于执行异步HTTP（Ajax）请求。
以下是$.ajax的基本使用方法：1.创建请求：```javascript$.ajax({url:"example.php",//请求的URL地址type:"GET",//请求方式，GET或POST dataType:"json",//预期服务器返回的数据类型，可以是xml、json、script、html等success:function(data){//请求成功后的回调函数console.log(data);//输出服务器返回的数据},error:function(){//请求失败时的回调函数console.log("请求失败");}});```2.发送数据：```javascript$.ajax({url:"example.php",type:"POST",data:{foo:"bar"},//要发送到服务器的数据，以键值对的形式表示dataType:"json",success:function(data){console.log(data);},error:function(){console.log("请求失败");}});```3.处理服务器响应：在成功回调函数中，服务器返回的数据作为参数传递给回调函数。
可以根据需要处理这些数据，例如更新页面内容或执行其他操作。
4.配置选项：$.ajax方法接受一个配置对象作为参数，其中包含以下选项：-`url`：请求的URL地址。
-`type`：请求方式，默认为"GET"。
-`dataType`：预期服务器返回的数据类型，默认为"html"。
jQuery中ajax请求后台返回json数据并渲染HTML的方法
jQuery中ajax请求后台返回json数据并渲染HTML的⽅法html实例<table border="0" class="restaurant_food" cellspacing="0" cellpadding="1"><input type="text" name="dishes" value="" class="seek_product" placeholder="请输⼊菜名"/><button type='button' class="btn_nor" onclick="seek_product()">搜索</button><tr><th width="30%">序号</th><th width="70%">菜名</th></tr><tr data-id=""><td></td><td class="tl"> <p></p></td></tr></table>jquery实例function seek_product(){var product = $('.seek_product').val();$.ajax({type:'get',url:'/Cash/Index/seek_product',data:{name:product},success:function(res){var data = eval('('+res+')');var len = data.length;var cm = "";if(len > 0){for(var i = 0; i < len; i++){cm += '<tr data-id='+data[i]['id']+'>';cm += '<td>';cm += i+1;cm += '</td>';cm += '<td class="tl">';cm += '<p>'+data[i]["name"]+'</p>';cm += '</td>';cm += '</tr>';console.log(cm);$('.restaurant_food').html(cm);}}else{$('.restaurant_food').html('抱歉，没有这道菜！');}}})}php实例//搜索菜public function seek_product(){$shop_id = session("cashShopId");$name = I('');$map['name'] = array('like','%'.$name.'%');$map['shop_id'] = $shop_id;$map['status'] = 1;$productList = M('product')->field('id,name')->where($map)->select();echo json_encode($productList);}以上这篇jQuery中ajax请求后台返回json数据并渲染HTML的⽅法就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
最近在使用JQuery的ajax方法时，要求返回的数据为json数据，在处理的过程中遇到下面的几个问题，那就是采用不同的方式来生成json数据的时候，在$.ajax方法中应该是如何来处理的，下面依次来进行说明，由于本人使用的是，所以处理的页面都是采用.net来做的！其他的方式应该是相同的吧首先给出要传的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的页面处理是一样的所以这里就不多做解释了！
本文由淄博SEO()，淄博网站优化()整理发布，转载请注明出处。