數(shù)據(jù)格式

我最近在使用JQuery的$.ajax訪問(wèn)后臺(tái)的時(shí)候，發(fā)現(xiàn)竟然無(wú)法解析返回的數(shù)據(jù)，具體的錯(cuò)誤記不清了(以后在遇到問(wèn)題先截個(gè)圖)，可以在瀏覽器的Console中看到一個(gè)錯(cuò)誤，但是去看這條請(qǐng)求是有數(shù)據(jù)返回的，所以剛開(kāi)始我一直以為是Ajax寫(xiě)的不對(duì)，但是這個(gè)Ajax也并不是很復(fù)雜，實(shí)在搞不懂了。

還好這個(gè)url可以通過(guò)get方式訪問(wèn)，所以我當(dāng)時(shí)直接在瀏覽器地址欄訪問(wèn)，發(fā)現(xiàn)是有數(shù)據(jù)返回的，但是這個(gè)數(shù)據(jù)的方式很奇怪，因?yàn)楝F(xiàn)在的瀏覽器都會(huì)對(duì)JSON數(shù)據(jù)進(jìn)行格式化顯示，但是這段數(shù)據(jù)的格式并非JSON的顯示樣式，反而是XML的方式顯示的，這就奇怪了，明明說(shuō)的都是通過(guò)JSON格式交互的，這是什么情況？我看后臺(tái)代碼之后發(fā)現(xiàn)他們使用的是@RestController (springMVC 的 org.springframework.web.bind.annotation.RestController)注解，而不是使用的@ResponseBody (使用RestController會(huì)告訴SpringMVC使用信息轉(zhuǎn)換器，就可以不使用@ResponseBody注解，而是SpringMVC通過(guò)請(qǐng)求頭的Accept屬性判斷，而有些時(shí)候這個(gè)值會(huì)是application/xml，所以會(huì)生成XML格式數(shù)據(jù))，我先沒(méi)有修改這些后臺(tái)代碼，而是將JQuery中Ajax的dataType屬性(dataType屬性可以手動(dòng)設(shè)置為json)指定為json，這些數(shù)據(jù)就可以正常被解析了。

唉，之后寫(xiě)Ajax還是可以加上dataType屬性吧。后來(lái)，我修改后臺(tái)代碼，設(shè)置response的ContentType (使用response.setContentType(type))為application/json;charset=utf-8也是可以被前端正常解析的(哪怕不使用dataType)。

$.ajax({url:'',type:'get',//設(shè)置Accept 預(yù)期服務(wù)器返回的數(shù)據(jù)類型dataType:'json',//contentType 可以指定發(fā)送給服務(wù)器的數(shù)據(jù)格式contentType:'application/json;charset=utf-8',data:{}});

跨域問(wèn)題

因?yàn)橛行?shù)據(jù)是需要訪問(wèn)其他的應(yīng)用才可以獲得的，所以就涉及到跨域的問(wèn)題，處理跨域的問(wèn)題有兩種：

第一種：使用JSONP來(lái)處理跨域問(wèn)題，只需要將dataType設(shè)置為jsonp即可（只支持GET方式的請(qǐng)求，因?yàn)槠涞讓邮褂玫牡氖莏s添加script標(biāo)簽，并設(shè)置script的src屬性值，所以只能是GET方式）

$.ajax({url: 'http://localhost:8080/testJsonp',dataType: "jsonp",success: function (data) {console.log(data)}})

這種方式不用修改后臺(tái)的代碼，但是并不一定可以100%解決跨域問(wèn)題，現(xiàn)象就是：請(qǐng)求響應(yīng)都很正常（200），而且在瀏覽器調(diào)試工具中也有數(shù)據(jù)返回，就是拿不到數(shù)據(jù)，還會(huì)報(bào)一個(gè)數(shù)據(jù)格式不正確（是多一個(gè)還是少一個(gè)，號(hào)的問(wèn)題）這個(gè)時(shí)候需要使用CORS方式。

如果數(shù)據(jù)量過(guò)大，使用GET方式就不太好了，因?yàn)閁RL長(zhǎng)度有限制，這個(gè)時(shí)候也需要使用CORS方式

方法二：CORS，跨域資源共享。修改后臺(tái)的代碼，添加響應(yīng)頭

response.setHeader("Access-Control-Allow-Origin", "*");response.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,OPTIONS");response.setHeader("Access-Control-Allow-Credentials", "true");

這種方式可以解決絕大部分跨域問(wèn)題，但是就是需要修改后臺(tái)代碼

轉(zhuǎn)載于:https://www.cnblogs.com/lz2017/p/8361030.html

總結(jié)

以上是生活随笔為你收集整理的使用Ajax解析数据遇到的问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。