废话不多说,直接上代码。
前端使用ajax
function showData(data){ //执行回调函数
console.info("调用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", //指定服务器返回的数据类型
//jsonp: "callback", //指定参数名称,默认是callback,后台拼接上需要接受此参数信息,jquery会帮我们处理
//jsonpCallback: "showData", //指定回调函数名称(可以不用,感觉用处不大)
success: function (data) {
if(data=="0"){
alert("会员用户名已经被占用!");
$("#username").val("");
}
},
error:function(){
alert("服务器繁忙");
}
});
请求路径
http://192.168.1.66:8080/hsisp/externalCheckname.do?callback=jQuery183046368776407660106_1550110668195&username=ocean&_=1550110685332
后台代码,需要接受callback参数(可根据js自行定义,默认是callback)
@RequestMapping("/externalCheckname")
public void checkUsername(String username,HttpServletRequest request,HttpServletResponse response) throws Exception{
// * 表示允许任何域名跨域访问
response.setHeader("Access-Control-Allow-Origin", "*");
// 指定特定域名可以访问
response.setHeader("Access-Control-Allow-Origin", "http:localhost:8080/");
//前端传过来的回调函数名称
String callback = request.getParameter("callback");
//用回调函数名称包裹返回数据,这样,返回数据就作为回调函数的参数传回去了
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方式跨域请求,就算指定成POST方式,会自动转为GET方式;而后端如果设置成POST方式了,那就请求不了了。
jsonp为动态的script,没有同源策略,所以只能是get
注意1:
**后台使用拼接的 json数据的时候,有两种做法
1.手动拼接,借助response
2.后台构建实体类,@responseBody这个实体类
eg:实体类
private boolean success//是否成功
private Object msg;//消息
private Object obj //其他对象
**
注意2:
springmvc4.1以上版本支持jsonp用法,用法如下
@Controller
public class CategoryController {
@Autowired
private CategoryService categoryService;
@RequestMapping("-----")
@ResponseBody
public Object getItemCatList(String callback) {//callback根据js自行修改
CatResult catResult = categoryService.getCategoryList();//返回的数据
MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(catResult);
mappingJacksonValue.setJsonpFunction(callback);
return mappingJacksonValue;
}
网友评论