廢話(huà)不多說(shuō)沫浆,直接上代碼。
前端使用ajax
function showData(data){ //執(zhí)行回調(diào)函數(shù)
console.info("調(diào)用showData");
var result = JSON.stringify(data);
$("#text").val(result);
}
$.ajax({
url: "http://192.168.1.66:8080/hsisp/externalCheckname.do",
type: "GET",
async: false,
data: {'username':username},
dataType: "jsonp", //指定服務(wù)器返回的數(shù)據(jù)類(lèi)型
//jsonp: "callback", //指定參數(shù)名稱(chēng)滚秩,默認(rèn)是callback专执,后臺(tái)拼接上需要接受此參數(shù)信息,jquery會(huì)幫我們處理
//jsonpCallback: "showData", //指定回調(diào)函數(shù)名稱(chēng)(可以不用郁油,感覺(jué)用處不大)
success: function (data) {
if(data=="0"){
alert("會(huì)員用戶(hù)名已經(jīng)被占用本股!");
$("#username").val("");
}
},
error:function(){
alert("服務(wù)器繁忙");
}
});
請(qǐng)求路徑
http://192.168.1.66:8080/hsisp/externalCheckname.do?callback=jQuery183046368776407660106_1550110668195&username=ocean&_=1550110685332
后臺(tái)代碼攀痊,需要接受callback參數(shù)(可根據(jù)js自行定義,默認(rèn)是callback)
@RequestMapping("/externalCheckname")
public void checkUsername(String username,HttpServletRequest request,HttpServletResponse response) throws Exception{
// * 表示允許任何域名跨域訪(fǎng)問(wèn)
response.setHeader("Access-Control-Allow-Origin", "*");
// 指定特定域名可以訪(fǎng)問(wèn)
response.setHeader("Access-Control-Allow-Origin", "http:localhost:8080/");
//前端傳過(guò)來(lái)的回調(diào)函數(shù)名稱(chēng)
String callback = request.getParameter("callback");
//用回調(diào)函數(shù)名稱(chēng)包裹返回?cái)?shù)據(jù)拄显,這樣苟径,返回?cái)?shù)據(jù)就作為回調(diào)函數(shù)的參數(shù)傳回去了
String result = "";
Member member=memberService.checkname(username);
int i=userService.selectUserByUname(username);
if(member!=null||i>0){
result = callback + "(" + 0 + ")";
}else{
result = callback + "(" + 1 + ")";
}
response.getWriter().print(result);
}
jsonp方式不支持POST方式跨域請(qǐng)求,就算指定成POST方式躬审,會(huì)自動(dòng)轉(zhuǎn)為GET方式棘街;而后端如果設(shè)置成POST方式了,那就請(qǐng)求不了了承边。
jsonp為動(dòng)態(tài)的script遭殉,沒(méi)有同源策略,所以只能是get
注意1:
**后臺(tái)使用拼接的 json數(shù)據(jù)的時(shí)候博助,有兩種做法
1.手動(dòng)拼接险污,借助response
2.后臺(tái)構(gòu)建實(shí)體類(lèi),@responseBody這個(gè)實(shí)體類(lèi)
eg:實(shí)體類(lèi)
private boolean success//是否成功
private Object msg;//消息
private Object obj //其他對(duì)象
**
注意2:
springmvc4.1以上版本支持jsonp用法翔始,用法如下
@Controller
public class CategoryController {
@Autowired
private CategoryService categoryService;
@RequestMapping("-----")
@ResponseBody
public Object getItemCatList(String callback) {//callback根據(jù)js自行修改
CatResult catResult = categoryService.getCategoryList();//返回的數(shù)據(jù)
MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(catResult);
mappingJacksonValue.setJsonpFunction(callback);
return mappingJacksonValue;
}