Jquery Ajax 异步处理Json数据

合集下载

ajax--实现异步请求，接受响应及执行回调

参数类型说明url 为string（因此要⽤引号引起来）发送请求的地址type string请求的⽅式：post或get请求。

默认为get请求data Object或string发送服务器的数据，键值对，字符串或对象，这⾥post请求有此参数，get请求直接在地址处？后⾯传参即可dataTypestring后端返回给前端的数据类型，⽐如html，xml，json。

本来是string,在ajax请求时设置dataType为json，将字符串；类型变为json类型succ ess function请求成功后调⽤的回调函数，需要操作的东西⼀般在这⾥写⽤法success:function(e 这个字母e可以是其他英⽂){写内容} 注意这个（）⾥⾯的e或者说其他东西就是后端HttpResponse或者JsonResponse返回的东西，这⾥与dataType有关error function请求失败时调⽤的回调函数asyn c Boolean是否异步处理，默认为True,false为同步处理ajax--实现异步请求，接受响应及执⾏回调ajax最⼤的优点是在不重新加载整个页⾯的情况下,可以与服务器交换数据并更新部分⽹页的内容ajax指是⼀种创建交互式⽹页应⽤的⽹页开发技术，其实就是实现前后端交互。

1）ajax是异步javascript，异步的意思即⾮阻塞，就像线程，在代码运⾏到ajax请求时，它会分成两条线，⼀条线去运⾏ajax请求⾥⾯的内容，另⼀条线去运⾏主程序（即ajax请求后⾯的代码），当然我们可以因需要异步设置成同步（即在运⾏到ajax请求时，将阻塞运⾏完ajax请求后，再去运⾏ajax外，后⾯的代码）2）注意ajax请求是由jquery发起的，因此⽤于jquery代码块中。

3）执⾏相应的视图函数（这⾥是在⼀个py，php等⽂件中创建⼀个视图函数，或者class类，给这个视图函数分级设置⼀个url地址，ajax请求中的url即填写这个完整的url地址），返回json内容。

jq解析json的高级用法

jq解析json的高级用法jq是一个轻量级的命令行工具，用于解析和操作JSON数据。

它提供了丰富的功能和高级用法，可以帮助用户更精确地提取和处理JSON数据。

本文将介绍jq解析JSON的高级用法，包括过滤、映射和条件操作等。

第一步：基本用法回顾在开始讨论jq的高级用法之前，我们先回顾一下jq的基本用法。

jq能够将JSON数据转换为人类可读的格式，并且能够输出特定的字段或组合字段的值。

以下是一些常用的命令：1. `.`这个点操作符表示当前对象。

例如：bashecho '{"name": "Alice", "age": 30}' jq '.name'# 输出："Alice"2. .点操作符还可以与其他命令连用，以获取嵌套字段的值。

例如：bashecho '{"user": {"name": "Alice", "age": 30}}' jq ''# 输出："Alice"3. `[]`这个方括号操作符可以用来遍历数组，并逐个输出数组中的元素。

例如：bashecho '[1, 2, 3, 4, 5]' jq '.[]'# 输出：# 1# 2# 3# 4# 5以上是jq的基本用法，用于提取和处理JSON数据中的字段。

接下来，我们将学习一些更高级的用法。

第二步：高级过滤器jq支持一些高级过滤器，用于在JSON数据中进行更复杂的查询和操作。

下面是几个常见的高级过滤器：1. `select()``select()`函数用于根据指定的条件过滤JSON对象。

例如：bashecho '[{"name": "Alice", "age": 30}, {"name": "Bob", "age": 25}]' jq 'select(.age > 28)'# 输出：# {"name": "Alice", "age": 30}2. `map()``map()`函数用于对数组中的每个元素应用指定的操作，并返回一个新的数组。

jQuery调用AJAX异步操作超清晰教程

JQUERY AJAX异步操作详细说明AJAX 全称 Asynchronous JavaScript and XML（异步的 JavaScript 和XML）。

它并非一种新的技术，而是以下几种原有技术的结合体。

1)使用CSS和XHTML来表示。

2)使用DOM模型来交互和动态显示。

3)使用XMLHttpRequest来和服务器进行异步通信。

4)使用javascript来绑定和调用。

通过AJAX异步技术，可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Request)/应答(Response)模型：1)不需要用户等待服务端响应。

在异步派发XMLHttpRequest请求后控制权马上就被返回到浏览器。

界面不会出现白板，在得到服务器响应之前还可以友好的给出一个加载提示。

2)不需要重新加载整个页面。

为XMLHttpRequest注册一个回调函数，待服务器响应到达时，触发回调函数，并且传递所需的少量数据。

“按需取数据”也降低了服务器的压力。

3)不需要使用隐藏或内嵌的框架。

在XHR对象之前，模拟Ajax通信通常使用hack手段，如使用隐藏的或内嵌的框架(<iframe>标签)。

下面介绍下AJAX中的重要对象：XMLHttpRequest。

XMLHttpRequest对象(XHR)XMLHttpRequest是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或接收XML及其他数据的一套API。

XMLHttpRequest对象首次以ActiveX对象形式在微软Internet Explorer(IE) 5中以引入。

其他浏览器制造商在认识到这一对象重要性后也纷纷实现了XMLHttpRequest对象，但是以一个本地JavaScript对象而不是作为一个ActiveX 对象实现。

而如今，由于安全性、标准等问题，微软已经在其IE 7中把XMLHttpRequest实现为一个本地JavaScript对象。

jquery解析json格式数据的方法（对象、字符串）

jquery解析json格式数据的⽅法（对象、字符串）本⽂实例讲述了jquery解析json格式数据的⽅法。

分享给⼤家供⼤家参考，具体如下：json数据是我们常⽤的⼀种⼩型的数据实时交换的⼀个东西，他可以利⽤jquery或js进⾏解析，下⾯我来介绍jquery解析json字符串⽅法。

⼀、jQuery解析Json数据格式：使⽤这种⽅法，你必须在Ajax请求中设置参数:dataType: "json"获取通过回调函数返回的数据并解析得到我们想要的值，看源码：jQuery.ajax({url: full_url,dataType: "json",success: function(results) {alert();} });通常情况下，你可以从后台返回JSON数据，前台就交给jQuery啦，哈哈！！jquery异步请求将type（⼀般为这个配置属性）设为“json”，或者利⽤$.getJSON()⽅法获得服务器返回，那么就不需要eval（）⽅法了，因为这时候得到的结果已经是json对象了，只需直接调⽤该对象即可，这⾥以$.getJSON⽅法为例例1代码如下:var data="{root:[{name:'1',value:'0'},{name:'6101',value:'北京市'},{name:'6102',value:'天津市'},{name:'6103',value:'上海市'},{name:'6104',value:'重庆市'},{name:'6105',value:'渭南市'},{name:'6106',value:'延安市'},{name:'6107',value:'汉中市'},{name:'6108',value:'榆林市'},{name:'6109',value:'安康市'},{name:'6110',value:'商洛市'}]}";jquery$.getJSON("https:///",{param:"sanic"},function(data){//此处返回的data已经是json对象//以下其他操作同第⼀种情况$.each(data.root,function(idx,item){if(idx==0){return true;//同countinue，返回false同break}alert("name:"++",value:"+item.value);});});⼆、jQuery解析Json对象：jQuery提供了另⼀种⽅法“parseJSON”，这需要⼀个标准的JSON字符串，并返回⽣成的JavaScript对象。

jQuery使用ajax传递json对象到服务端及contentType的用法示例

jQuery使⽤ajax传递json对象到服务端及contentType的⽤法⽰例⽬录0、⼀般情况下，通过键值对的⽅式将参数传递到服务端0.1 客户端代码：0.2 服务端代码：0.3 在浏览器的⽹络中查看此次请求：1、ajax 传递复杂json对象到服务端1.1 ⽅法⼀：通过formdata传值，服务端通过key获取值；1.2 ⽅法⼆：通过formdata⽅式传值，服务端读取Request.InputStream;2、content-Type 对 mvc项⽬的重要性2.1 客户端代码：2.2 服务端代码：2.3 解决⽅案：（设置contentType）2.4 其他的解决⽅案：（修改服务端代码）本⽂实例讲述了jQuery使⽤ajax传递json对象到服务端及contentType的⽤法。

分享给⼤家供⼤家参考，具体如下：0、⼀般情况下，通过键值对的⽅式将参数传递到服务端0.1 客户端代码：$.ajax({url: 'TestHandler.ashx',type: 'post',data: {name: "admin",age: 10},dataType: 'text',success: function (data) {alert(data);}})0.2 服务端代码：public void ProcessRequest(HttpContext context){string bodyText = string.Empty;using (var bodyReader = new System.IO.StreamReader(context.Request.InputStream)){bodyText = bodyReader.ReadToEnd();}string name= context.Request["name"].ToString();// "admin"string age = context.Request["age"].ToString();// "10"context.Response.ContentType = "text/plain";context.Response.Write(bodyText);// "name=admin&age=10"}0.3 在浏览器的⽹络中查看此次请求：从上⾯的截图中可以看出，post请求，是将formdata中键值对⽤符号“&”相连，拼接成⼀个字符串，传递到服务端，服务端可以通过key来获取值，或从request的body中读取整个字符串；1、ajax 传递复杂json对象到服务端1.1 ⽅法⼀：通过formdata传值，服务端通过key获取值；客户端代码：var user1 = {username: 'admin',age: 10};var user2 = {username: 'test',age: 11};var userArr = [];userArr.push(user1);userArr.push(user2);$.ajax({url: 'TestHandler.ashx',type: 'post',//contentType: 'application/json',//contentType:"application/x-www-form-urlencoded; charset=UTF-8",data: {Users: JSON.stringify(userArr)},dataType: 'text',success: function (data) {alert(data);}})服务端代码：public void ProcessRequest(HttpContext context){string contentType= context.Request.ContentType;// "application/x-www-form-urlencoded; charset=UTF-8"string users = context.Request["Users"].ToString();dynamic obj = JsonConvert.DeserializeObject(users);context.Response.ContentType = "text/plain";context.Response.Write(obj[0].username);// "admin"}1.2 ⽅法⼆：通过formdata⽅式传值，服务端读取Request.InputStream;前端代码：var user1 = { username: 'admin', age: 10 };var user2 = { username: 'test', age: 11 };var userArr = [];userArr.push(user1);userArr.push(user2);$.ajax({url: 'TestHandler.ashx',type: 'post',//contentType: 'application/json',//contentType:"application/x-www-form-urlencoded; charset=UTF-8",data: JSON.stringify(userArr),dataType: 'text',success: function (data) {alert(data);}})服务端代码：public void ProcessRequest(HttpContext context){string contentType= context.Request.ContentType;//"application/x-www-form-urlencoded; charset=UTF-8"string bodyText = string.Empty;using (var bodyReader = new System.IO.StreamReader(context.Request.InputStream)){bodyText = bodyReader.ReadToEnd();// [{"username":"admin","age":10},{"username":"test","age":11}]}dynamic obj = JsonConvert.DeserializeObject(bodyText);context.Response.ContentType = "text/plain";context.Response.Write(obj[0].username);// "admin"}通过浏览器查看此次请求：从图中可以看出，content-Type 为application/x-www-form-urlencoded，所以浏览器尝试将传输的数据解析成key-value的形式，但实际在ajax中的data中设置的是⼀个json字符串，⽆法解析成key-value的形式，故在服务端⽆法通过key来获取值；只能从Request.InputStream获取。

jqueryajaxthinkphp异步局部刷新完整流程

jqueryajaxthinkphp异步局部刷新完整流程环境：ThinkPHP3.2.3，jQuery3.2前⾔：在⼀般的⽹站中，都需要⽤到jquery或者其他框架（⽐如angular）来处理前后端数据交互，thinkphp在后台也内置了⼀些函数⽤于数据交互（⽐如ajaxReturn()）。

本⽂的⽬的是打通使⽤ajax在jquery和thinkphp之间的前后端数据交互过程。

正⽂：⼀、thinkphp关于ajax的介绍1.1 ajaxReturn：\Think\Controller类提供了ajaxReturn⽅法⽤于AJAX返回数据给客户端（视图、模板、js等）。

并且⽀持JSON、JSONP、XML和EVAL四种⽅式给客户端接受数据（默认JSON）。

（链接：）配置⽅式：convention.php中定义了默认编码类型为DEFAULT_AJAX_RETURN => 'JSON',分析：ajaxReturn()调⽤了json_encode()将数值转换成json数据存储格式，常⽤的数值是数组。

注意：The value being encoded can be any type except a resource(资源⽂件).All string data must be UTF-8 encoded.（链接：）举例：$data['status'] = 1;$data['content'] = 'content';$this->ajaxReturn($data);1.2 请求类型：系统内置了⼀些常量⽤于判断请求类型，⽐如：常量说明IS_GET 判断是否是GET⽅式提交IS_POST 判断是否是POST⽅式提交IS_PUT 判断是否是PUT⽅式提交IS_DELETE 判断是否是DELETE⽅式提交IS_AJAX 判断是否是AJAX提交REQUEST_METHOD 当前提交类型⽬的：⼀⽅⾯可以针对请求类型作出不同的逻辑处理，另外⼀⽅⾯可以过滤不安全的请求。

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;至此，一个完整的操作已完成，这就是自己的一点点整理，希望以后有更多的有技术的知识与大家分享！。

ajax传值,jQuery.ajax,json格式转化和前台后台传值

1.ajax传输用字符串，后台接收参数用request.getParameter，所以前台必须有Parameter 如"/FirstServlet/regPage?countryId=" + countryId2.后台向前台传参数通过response，PrintWriter pw = resp.getWriter();pw.print(“df”);前台接收参数用var txt = xhr.responseText;3.如果用json字符串传输前台用jQuery.ajax是如下data : {'mydata':jsonStr},jQuery.ajax({type: "post",url: url,dataType : 'json',data : {'mydata':jsonStr},success: function(data,textStatus){alert("操作成功");},error: function(xhr,status,errMsg){alert("操作失败!");}});后台一样用request如String jsonStr = ServletActionContext.getRequest().getParameter("mydata");4.后台向前台传值一样用response如pw.print(jsonList.toString());前台接收jQuery用success: function(data,textStatus)data就是一个json（自动将json字符串转化为了json）5.json与json字符串之间的转化json的格式两种：数组["hello", 12, true , null];和对象{ "color": "red", "doors" : 4, "paidFor" : true };前台：json-json字符串JSON.stringify(jsonobj);$("#form").serialize()//表单转化为json字符串json字符串-jsoneval('(' + jsonstr + ')');JSON.parse(jsonstr);使用Function对象来进行返回解析function(data,textStatus){后台：json-json字符串jsonObj.toString()json字符串-jsonJSONObject obj1 = JSONObject.fromObject("{'dsaf':'uuuu'}");JSONObject obj = JSONObject.fromObject(address);//把对象转化为json。

JQuery ajax返回JSON时的处理方式

最近在使用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()，淄博网站优化()整理发布，转载请注明出处。

jq的ajax写法

jq的ajax写法在使用jq（jQuery）进行AJAX（异步JavaScript和XML）请求时，可以使用以下写法：1. 使用$.ajax()方法：javascript.$.ajax({。

url: "请求的URL",。

method: "请求方法（GET、POST等）",。

data: "请求参数（可选）",。

dataType: "预期的响应数据类型（可选）",。

success: function(response) {。

// 可以在这里处理响应数据。

},。

error: function(xhr, status, error) {。

// 请求失败时的回调函数。

// 可以在这里处理错误信息。

}。

});2. 使用$.get()方法发送GET请求：javascript.$.get("请求的URL", function(response) {。

// 可以在这里处理响应数据。

});3. 使用$.post()方法发送POST请求：javascript.$.post("请求的URL", "请求参数（可选）",function(response) {。

// 请求成功时的回调函数。

// 可以在这里处理响应数据。

});4. 使用$.getJSON()方法发送GET请求并期望JSON格式的响应： javascript.$.getJSON("请求的URL", function(response) {。

// 请求成功时的回调函数。

// 可以在这里处理响应数据。

});这些是jq中常用的AJAX写法，你可以根据具体需求选择适合的方法。

请注意，以上代码仅为示例，你需要根据实际情况替换URL、请求方法、请求参数和回调函数等内容。

jQuery通过ajax方法获取json数据不执行success的原因及解决方法

jQuery通过ajax⽅法获取json数据不执⾏success的原因及解决⽅法1.jquery通过ajax⽅法获取json数据不执⾏success回调问题描述：jquery通过ajax⽅法获取json数据不执⾏success回调⽅法问题原因：json格式存在问题或不符合标准写法，导致总是执⾏error回调⽅法解决⽅案：使json格式务必符合下述3个标准写法： 1）键名称：⽤双引号括起； 2）字符串：⽤双引号括起； 3）数字，布尔值不需要使⽤双引号括起；注意：⼀定是双括号！2.jQuery中ajax使⽤json数据类型总是跳过success执⾏error语句执⾏函数error : function(XMLHttpRequest, textStatus, errorThrown) {//这个error函数调试时⾮常有⽤，如果解析不正确，将会弹出错误框 alert(XMLHttpRequest.responseText);alert(XMLHttpRequest.status);alert(XMLHttpRequest.readyState);alert(textStatus); // parser error;}就明⽩错误信息了；弹出的框⾥显⽰：<!DOCTYPE html PUBLIC "-//W3C //DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD /xhtml1-transitional.dtd">以及<?xml version="1.0" encoding="gb2312" ?>这两句话，虽然不清楚为什么，我删除之后，就成功执⾏ success了3.$.ajax()中的URL跨域时，总是不执⾏success，⽼进⼊error1）我加上ServletActionContext.getResponse().setHeader("Access-Control-Allow-Origin", "*");解决跨域问题，就顺利进⼊success了2）dataType:"json",去掉看能进success 不。

$.ajaxfileupload用法

$.ajaxfileupload用法在Web开发中，文件上传是一种常见的操作，而使用Ajax技术可以实现异步文件上传，提高页面性能和用户体验。

jQuery中的$.ajaxFileUpload方法提供了一种简单易用的方式来实现文件上传功能。

$.ajaxFileUpload方法用于通过Ajax方式上传文件，支持多文件上传和回调函数的使用。

它接受三个参数：文件路径、回调函数和可选配置参数。

通过该方法，可以实现文件上传的异步操作，避免了页面刷新带来的影响，提高了页面性能。

二、用法示例```javascript//创建一个用于上传文件的表单元素varform=$('<form/>',{'method':'POST','enctype':'multipart/form-data'}).appendTo('body');//添加文件输入框varinput=$('<input/>',{'type':'file','name':'file','value':''}).appendTo(form);//触发文件选择器，选择文件input.trigger('click');//添加文件到表单中input.on('change',function(){varfiles=input.prop('files');if(files&&files.length>0){//创建AjaxFileUpload对象varupload=newAjaxFileUpload(form,{//配置选项action:'/upload',//上传接口地址autoSubmit:false,//不自动提交表单responseType:'json',//返回数据类型为JSONfileVal:'file',//文件字段名onComplete:function(data){//上传完成后回调函数console.log(data);//打印返回数据//TODO:处理上传结果，更新页面等操作},onError:function(error){//上传过程中出现错误时回调函数console.log(error);//打印错误信息//TODO:处理上传错误，显示错误提示等操作}});//开始上传文件upload.upload();}else{console.log('请选择文件');//输出提示信息}});```在上述示例中，首先创建了一个表单元素和一个文件输入框，并设置了表单的enctype属性为multipart/form-data，用于多文件上传。

jqueryajax调用springboot接口发送json数据示例，兼容跨域调用，解决m。。。

jqueryajax调⽤springboot接⼝发送json数据⽰例，兼容跨域调⽤，解决m。

本⽂主要解决三个问题：1.解决maven项⽬中引⽤本地lib⽬录的jar包时打包失败的问题2.解决spring boot开发的微服务接⼝中的跨域问题3.ajax 发送json数据的问题昨天研究 office 外接程序开发时，发现在插件中调⽤后台由 Spring boot 开发的接⼝并传递json时总是失败，调试了半天，尝试了$.ajax，$.post等⽅法服务端均⽆法获取到正确的请求，发送到后端的请求的格式是application/www-urlencode，⽽后端接受的是application/json格式的数据，由于⽤postman测试接⼝可以正常返回，应该可以说明后台接⼝没有问题。

1.解决maven项⽬中引⽤本地lib⽬录的jar包时打包失败的问题其实在⼀开始编写后台接⼝时，也遇到了⼀些问题，因为接⼝中引⽤了⼀个项⽬本地的lib⽬录中的jar包，⽽这个jar包并未⽤maven管理，所以调试和打包上遇到了⼀些问题，以前使⽤mvn clean install就可以完成的动作，现在⼀直报错，在pom中这样修改就可以解决了：<build><resources><resource><directory>lib</directory><targetPath>/BOOT-INF/lib/</targetPath><includes><include>**/*.jar</include></includes></resource></resources><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-compiler-plugin</artifactId><configuration><skip>true</skip></configuration></plugin><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-surefire-plugin</artifactId><configuration><skip>true</skip></configuration></plugin></plugins></build>2.解决spring boot开发的微服务接⼝中的跨域问题由于服务端⽇志中⼀直观察不到ajax调⽤的正确请求，于是祭出终极⼤杀器——抓包，打开WireShark，选择对应的⽹卡，参数设置成：ip.dst_host== 你接⼝服务器的ip && tcp.dstport ==你接⼝服务监听的端⼝抓包后发现，第⼀个HTTP请求竟然不是POST，⽽是OPTIONS：这不是我嘞个⼤擦了么…… ⽴马拿出万能钥匙——⾕歌搜索引擎开始解决问题，输⼊关键字“http options request”，看到第⼀条就应该是我要的答案了：沿着指路明灯给出的航向继续前进（）：OPTIONSThe HTTP OPTIONS method requests permitted communication options for a given URL or server. A client can specify a URL with thismethod, or an asterisk (*) to refer to the entire server.继续往下翻，看到了这段⽂字：In , a is sent with the OPTIONS method so that the server can respond if it is acceptable to send the request. In this example, we will request permission for these parameters:The header sent in the preflight request tells the server that when the actual request is sent, it will have a request method.The header tells the server that when the actual request is sent, it will have the X-PINGOTHER and Content-Type headers.我恍然⼤悟，原来是跨域调⽤的问题。

jQuery AJAX和JSON例子

基于jQuery的AJAX和JSON的实例通过jQuery内置的AJAX功能，直接访问后台获得JSON格式的数据，然后通过jQuer把数据绑定到事先设计好的html模板上，直接在页面上显示。

我们先来看一下html模板：<table id="datas" border="1" cellspacing="0" style="border-collapse: collapse"><tr><th>订单ID</th><th>客户ID</th><th>雇员ID</th><th>订购日期</th><th>发货日期</th><th>货主名称</th><th>货主地址</th><th>货主城市</th><th>更多信息</th></tr><tr id="template"><td id="OrderID"></td><td id="CustomerID"></td><td id="EmployeeID"></td><td id="OrderDate"></td><td id="ShippedDate"></td><td id="ShippedName"></td><td id="ShippedAddress"></td><td id="ShippedCity"></td><td id="more"></td></tr></table>一定要注意的就是里面所有的id属性，这个是一个关键。

jQuery的Ajax实现异步传输List、Map

jQuery的Ajax实现异步传输List、Map由于项目需要通过ajax得到后台的List对象里面的值，由于没有接触过json所以前期我只能先传字符串再在js里截取子串实现。

闲暇时间摸索了一下关于json接受List对象的方法，步骤如下：1.首先下载json所以依赖的包， Json-lib 最新版 json-lib-2.3-jdk15.jar，其官方网站是：/可以直接download，细心的你会发现其网站页面里面有提示它还需要其他包：Json-lib requires (at least) the following dependencies in your classpath: jakarta commons-lang 2.4jakarta commons-beanutils 1.7.0jakarta commons-collections 3.2jakarta commons-logging 1.1.1ezmorph 1.0.6其中一般项目中都会有前4个，所以只需要下载ezmorph 1.0.6 就可以了下载地址分别是：/lang//beanutils//collections//logging//2.首先先见一个小web项目先建一个User类：package com.json;public class User {String username;String password;public String getUsername() {return username;}public void setUsername(String username) {ername = username;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}}再建一个servletpackage com.json;import java.io.IOException;import java.io.PrintWriter;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONArray;public class TestJson extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request,response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html");String str= request.getParameter("name");//得到ajax传递过来的paramaterSystem.out.print(str);PrintWriter out = response.getWriter();List list = new ArrayList();//传递ListMap m=new HashMap();//传递MapUser u1=new User();u1.setUsername("zah");u1.setPassword("123");User u2=new User();u2.setUsername("ztf");u2.setPassword("456");list.add(u1); //添加User对象list.add(u2); //添加User对象m.put("u1", u1);m.put("u2", u2);JSONArray jsonArray2 = JSONArray.fromObject( list );//转化成json 对象JSONObject jo=JSONObject.fromObject(m);//转化Map对象out.print(jsonArray2);//返给ajax请求out.print(jo);//返给ajax请求}}配置好web.xml中的servlet映射，这一步就略了。

getjson的用法

getjson的用法
jQuery的getJSON方法是一种前端取JSON数据的高效方式，其语法简单易用，尤其适用于异步请求。

可以有效地解决Ajax运行复杂的同步请求的问题，提高程
序的运行效率。

谈起jQuery的getJSON方法，首先要说的是它的使用方法。

基本使用格式如下：
$.getJSON("url/to/data", function(data){ //返回的data默认为JSON格式 //在此处
可以处理返回的JSON数据 });
其中，前面的第一个参数是JSON文件所在url地址，第二个参数是通过回调
函数处理返回的JSON数据，最后调用getJSON即可完成JSON数据的获取。

另外，为了避免浏览器出现同源策略的错误，可以借助公共API实现越域调用的效果，两种常用的方式是jsonp和websocket协议。

jsonp协议可以实现跨域调用，解决浏览器跨域错误的原理是通过<script>标签
对数据进行获取，其中需要指定函数名称来接收取得的数据。

websocket是一种新
型的网络协议，可以解决跨域调用及单页应用中数据实时同步更新的问题，使用它可以使前端和后端保持长连接。

总之，jQuery的getJSON方法可以快速方便地获取JSON格式的数据，在保证跨域安全的前提下可以使用jsonp或websocket协议，有效的提高前端运行效率，
使得界面更加易于操作。

jqueryajax获取json并解析，获取的json是object对象格式

jqueryajax获取json并解析，获取的json是object对象格式⾸先我们使⽤的是ajax⽅式，推荐⼀个学习⽹址：这个博主写的特别好。

现在来看我们的例⼦：这⾥是没有参数的get⽅式：function tryapitest(){$.ajax({url:"/api/category/top/all",type:"get",dataType:"json",success: function(data) {console.log(data);},error: function(XMLHttpRequest, textStatus, errorThrown) {alert(XMLHttpRequest.status);alert(XMLHttpRequest.readyState);alert(textStatus);},})}控制台打印出的数据如下：可以看到，我们获取的data由三级组成：ststus,msg,data；那么接下来，我们需要获取data:Array(12)这个数据；因此在success函数⾥⾯添加如下：success: function(data) {//console.log(data);var item=data.data;console.log(item);}},此时查看console控制台的输出信息：可以看到此时已经获得Object的信息了，但是如果需要获取Object⾥⾯具体的属性，必须要将Object进⾏遍历：代码如下：success: function(data) {//console.log(data);var item=data.data;//console.log(item);for(var i=0;i<item.length;i++){console.log(item[i]);}},查看控制台的信息：此时就可以获取对应的数据和属性啦。

Jquery中$.get（）,$.post（）,$.ajax（）,$.getJSON（）的用法总结

Jquery中$.get（）,$.post（）,$.ajax（）,$.getJSON（）的⽤法总结详细解读Jquery各Ajax函数：$.get(),$.post(),$.ajax(),$.getJSON()⼀，$.get(url,[data],[callback])说明：url为请求地址，data为请求数据的列表，callback为请求成功后的回调函数，该函数接受两个参数，第⼀个为服务器返回的数据，第⼆个参数为服务器的状态，是可选参数。

⽽其中，服务器返回数据的格式其实是字符串形势，并不是我们想要的json数据格式，在此引⽤只是为了对⽐说明复制代码代码如下:$.get("data.php",$("#firstName.val()"),function(data){$("#getResponse").html(data); }//返回的data是字符串类型);⼆，$.post(url,[data],[callback],[type])说明：这个函数跟$.get()参数差不多，多了⼀个type参数，type为请求的数据类型，可以是html,xml,json等类型，如果我们设置这个参数为：json，那么返回的格式则是json格式的，如果没有设置，就和$.get()返回的格式⼀样，都是字符串的复制代码代码如下:$.post("data.php",$("#firstName.val()"),function(data){$("#postResponse").html();},"json"//设置了获取数据的类型，所以得到的数据格式为json类型的);三，$.ajax(opiton)说明：$.ajax()这个函数功能强⼤，可以对ajax进⾏许多精确的控制，需要详细说明的请参照相关资料复制代码代码如下:$.ajax({url: "ajax/ajax_selectPicType.aspx",data:{Full:"fu"},type: "POST",dataType:'json',success:CallBack,error:function(er){BackErr(er);}});四，$.getJSON(url,[data],[callback])复制代码代码如下:$.getJSON("data.php",$("#firstName.val()"),function(jsonData){$("#getJSONResponse").html(jsonData.id);}//⽆需设置，直接获取的数据类型为json，所以调⽤时需要使⽤jsonData.id⽅式);When Ajax meets jQuery 基于AJAX的应⽤现在越来越多，⽽对于前台开发⼈员来说，直接和底层的HTTPRequest打交道⼜不是⼀件令⼈愉快的事情。

jQuery中$.ajax解析xml、json格式数据

jQuery中$.ajax解析xml、json格式数据$.ajax()方法参数详解：url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。

注意：这个要访问url必须与js文件在同一个域，否则会报错。

type: 要求为String类型的参数，请求方式（post或get）默认为get。

注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。

timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。

此设置将覆盖$.ajaxSetup()方法的全局设置。

async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。

如果需要发送同步请求，请将此选项设置为false。

注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。

cache：要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false）。

设置为false将不会从浏览器缓存中加载请求信息。

data: 要求为Object或String类型的参数，发送到服务器的数据。

如果已经不是字符串，将自动转换为字符串格式。

get请求中将附加在url后。

防止这种自动转换，可以查看processData选项。

对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。

如果是数组，jQuery将自动为不同值对应同一个名称。

例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

dataType: 要求为String类型的参数，预期服务器返回的数据类型。

如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。

基于jQuery的AJAX和JSON的实例

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

啥叫异步,啥叫Ajax.咱不谈啥XMLHTTPRequest.通俗讲异步就是前台页面javascript能调用后台方法.这样就达到了无刷新.所谓的Ajax.这里我们讲二种方法方法一:(微软有自带Ajax框架)在里微软有自己的Ajax框架.就是在页面后台.cs文件里引入 using System.Web.Services 空间然后定义静态方法(方法前加上 [WebMethod])[WebMethod]public static string ABC(string ABC){return ABC;}好了,现在我们谈谈前台Js怎么处理后台返回的数据吧,可利用Jquery处理返回的纯html,json,Xml等数据.这里我们演示返回返回的数据有string、集合(List<>)、类.但都返回Json格式(Json轻量级比XML处理起来简单).看看前台是怎么解析这些数据的.代码如下:前台页面:<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs"Inherits="Default2" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head runat="server"><title>无标题页</title><style type="text/css">.hover{cursor: pointer; /*小手*/background: #ffc; /*背景*/}</style><script type="text/javascript" src="js/jquery-1.3.2-vsdoc2.js"></script><script type="text/javascript">//无参数调用$(document).ready(function() {$('#btn1').click(function() {$.ajax({type: "POST", //访问WebService使用Post方式请求contentType: "application/json", //WebService 会返回Json类型url: "Default2.aspx/HelloWorld", //调用WebService的地址和方法名称组合 ---- WsURL/方法名data: "{}", //这里是要传递的参数，格式为 data: "{paraName:paraValue}",下面将会看到dataType: 'json',success: function(result) { //回调函数，result，返回值alert(result.d);}});});});//有参数调用$(document).ready(function() {$("#btn2").click(function() {$.ajax({type: "POST",contentType: "application/json",url: "Default2.aspx/GetWish",data: "{value1:'心想事成',value2:'万事如意',value3:'牛牛牛',value4:2009}", dataType: 'json',success: function(result) {alert(result.d);}});});});//返回集合（引用自网络，很说明问题）$(document).ready(function() {$("#btn3").click(function() {$.ajax({type: "POST",contentType: "application/json",url: "Default2.aspx/GetArray",data: "{i:10}",dataType: 'json',success: function(result) {$(result.d).each(function() {alert(this);$('#dictionary').append(this.toString() + " ");//alert(result.d.join(" | "));});}});});});//返回复合类型$(document).ready(function() {$('#btn4').click(function() {$.ajax({type: "POST",contentType: "application/json",url: "Default2.aspx/GetClass",data: "{}",dataType: 'json',success: function(result) {$(result.d).each(function() {//alert(this);$('#dictionary').append(this['ID'] + " " + this['Value']);//alert(result.d.join(" | "));});}});});});//Ajax 为用户提供反馈，他们两个方法可以添加给jQuery对象在Ajax前后回调//但对与Ajax的监控，本身是全局性的$(document).ready(function() {$('#loading').ajaxStart(function() {$(this).show();}).ajaxStop(function() {$(this).hide();});});// 鼠标移入移出效果，多个元素的时候，可以使用“，”隔开$(document).ready(function() {$('btn').hover(function() {$(this).addClass('hover');}, function() {$(this).removeClass('hover');});});</script></head><body><form id="form1" runat="server"><div><input type="button" id="btn1" value="HelloWorld"/><input type="button" id="btn2" value="传入参数"/><input type="button" id="btn3" value="返回集合"/><input type="button" id="btn4" value=" 返回复合类型"/></div><div id="dictionary">dictionary</div></form></body></html>后台.cs文件using System;using System.Collections;using System.Collections.Generic;using System.Configuration;using System.Data;using System.Linq;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.HtmlControls;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.Services;public partial class Default2 : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){}[WebMethod]public static string HelloWorld(){return "123--->456";}[WebMethod]public static string ABC(string ABC){return ABC;}[WebMethod]public static string GetWish(string value1, string value2, string value3, int value4) {return string.Format("祝您在{3}年里 {0}、{1}、{2}", value1, value2, value3, value4); }/// <summary>/// 返回集合/// </summary>/// <param name="i"></param>/// <returns></returns>[WebMethod]public static List<int> GetArray(int i){List<int> list = new List<int>();while (i >= 0){list.Add(i--);}return list;}/// <summary>/// 返回一个复合类型/// </summary>/// <returns></returns>[WebMethod]public static Class1 GetClass(){return new Class1 { ID = "1", Value = "牛年大吉" };}public class Class1{public string ID { get; set; }public string Value { get; set; }}}利用Jquery让返回的各类数据(string、集合(List<>)、类)以Json数据格式返回,为什么要用到result.d 这里我们顺带讲下JsonJson简单讲就是Javascript对象或数组.Json形式一: javascript对象 { "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" }Json形式二: javascript数组 [{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" },{ "firstName": "Jason", "lastName":"Hunterwang", "email": "bbbb"}]当然javascript 数组和对象可以互相嵌套.如形式一中的"Brett"可以换成一个Js数组或Js对象.那微软的Ajax返回的是哪种形式呢.是第一种.微软框架默认返回一个 { "d": "后台返回的数据" } 这里我们用以上示例中的测试到得比如如上例的返回的是string类型的话Firefox调试如下当返回的是List<>类型的话FireFox调试如下返回的数据也是放在Js对象中的d属性里面所以说这就是为什么我们老是用result.d来取微软的框架返回的数据.方法一不常用.一般用得多的还是方法二.方法二:(建一个一般处理程序即.ashx文件)用这种方法一般是我们要在ashx文件里手动写好返回的Json格式的数据返回给前台用ashx 你可以配成Json格式一或Json格式二Default.aspx页面Js代码如下$.ajax({type: "POST",url: "Handler.ashx",dataType: "json",success: function(data){alert(); //返回的为 Json格式一(Js对象)/* 返回的为 Json格式二(Js对象)$(data).each(function(i) {alert(data[i].name);});*/}});Handler.ashx 代码如下<%@ WebHandler Language="C#" Class="Handler" %>using System;using System.Web;using System.Collections;using System.Collections.Generic;using System.Web.Script.Serialization;public class Handler : IHttpHandler {public void ProcessRequest (HttpContext context) {JavaScriptSerializer jss = new JavaScriptSerializer();context.Response.ContentType = "text/plain";// 返回的为Json格式一 Js对象string data = "{\"name\":\"wang\",\"age\":25}";// 返回的为Json格式二 Js数组//string data = "[{\"name\":\"wang\",\"age\":25},{\"name\":\"zhang\",\"age\":22}]"; context.Response.Write(data);}public bool IsReusable {get {return false;}}}以上基本上就第二种方法,可能有人不喜欢拼字符串.那有什么好办法呢?答案是有.微软对Json有很好的支持.拿上例子说我们只要把Handler.ashx改一下就可以了Handler.ashx 代码如下<%@ WebHandler Language="C#" Class="Handler" %>using System;using System.Web;using System.Collections;using System.Collections.Generic; // Dictionary<,> 键值对集合所需using System.Web.Script.Serialization; //JavaScriptSerializer 类所需public class Handler : IHttpHandler {public void ProcessRequest (HttpContext context) {JavaScriptSerializer jss = new JavaScriptSerializer();context.Response.ContentType = "text/plain";Dictionary<string, string> drow = new Dictionary<string, string>();drow.Add("name", "Wang");drow.Add("age", "24");context.Response.Write(jss.Serialize(drow));}public bool IsReusable {get {return false;}}}中的JavaScriptSerializer为我们提供了很好的方法jss.Serialize(drow) 是把drow的Dictionary<string, int> (键和值的集合)数据类型转换成Json数据格式调试结果如下图 (上面例子是输出了一个键值多集合即一个Json形式一的Js对象)如果要输出Json形式二(Js数组)呢? 我们也只要改动一部分就了Handler.ashx 代码如下<%@ WebHandler Language="C#" Class="Handler" %>using System;using System.Web;using System.Collections;using System.Collections.Generic;using System.Web.Script.Serialization;public class Handler : IHttpHandler {public void ProcessRequest (HttpContext context) {JavaScriptSerializer jss = new JavaScriptSerializer();context.Response.ContentType = "text/plain";List<Dictionary<string, string>> _list = new List<Dictionary<string, string>>();Dictionary<string, string> drow = new Dictionary<string, string>();drow.Add("name", "Wang");drow.Add("age", "24");Dictionary<string, string> drow1 = new Dictionary<string, string>();drow1.Add("name", "Zhang");drow1.Add("age", "35");_list.Add(drow);_list.Add(drow1);context.Response.Write(jss.Serialize(_list));}public bool IsReusable {get {return false;}}}调试结果如下图 (上面例子是输出了Json形式二的Js数组)讲到这里基本概念也讲得差不多了. 这里再讲一个够常碰到的例子就是如何把DataTabel转换成Json格式从而好让前台页面调用.就是在Handler.ashx写上一个方法/// <summary>/// DataTable转Json/// </summary>/// <param name="dtb"></param>/// <returns></returns>private string Dtb2Json(DataTable dtb){JavaScriptSerializer jss = new JavaScriptSerializer();ArrayList dic = new ArrayList();foreach (DataRow row in dtb.Rows){Dictionary<string, object> drow = new Dictionary<string, object>(); foreach (DataColumn col in dtb.Columns){drow.Add(col.ColumnName, row[col.ColumnName]);}dic.Add(drow);}return jss.Serialize(dic);}其实也有把Json格式转换成DataTabel格式,方法如下/// <summary>/// Json转DataTable/// </summary>/// <param name="json"></param>/// <returns></returns>private DataTable Json2Dtb(string json){JavaScriptSerializer jss = new JavaScriptSerializer();ArrayList dic = jss.Deserialize<ArrayList>(json);DataTable dtb = new DataTable();if (dic.Count > 0){foreach (Dictionary<string, object> drow in dic){if (dtb.Columns.Count == 0){foreach (string key in drow.Keys){dtb.Columns.Add(key, drow[key].GetType());}}DataRow row = dtb.NewRow();foreach (string key in drow.Keys){row[key] = drow[key];}dtb.Rows.Add(row);}}return dtb;}我们让返回的Json以表格的形式显示出来那么前台页面JS如下$.ajax({type: "POST",url: "Handler.ashx",dataType: "json",success: function(data){var table = $("<table border='1'></table>");for (var i = 0; i < data.length; i++) {o1 = data[i];var row = $("<tr></tr>");for (key in o1){var td = $("<td></td>");td.text(o1[key].toString());td.appendTo(row);}row.appendTo(table);}table.appendTo($("#back"));}});由上例子再讲两个Js知识点1. 之前我们取Json里面的数据如果是返回的是数组的话是用data[i].name也可表示为data[i]["name"]2. 如果要访问Js对象的说所有属性那么遍历Js对象.success: function(data){$(data).each(function(i) {for(key in this) // 遍历Js对象的所有属性alert(data[i][key]);//这里就不能换成 data[i].key 否则key成了属性而不是上面的key变量});}也有把前台Json数据传到后台后解析成DataTabel这里我把DataTabel软成Json和Json转成DataTabel写成一个例子.下载地址如下。