我最近做的项目用到select2插件,项目中请求ajax的dataType必须为jsonp。我百度select2 ajax都是dataType为json的例子,还有说用jsonp需要配置apikey,还没研究???
我第一反应是去select2官网去找,很遗憾也没有说明,后来去[select2](http://select2.github.io/select2/)的github上找,终于找到一个关于select2 ajax的参数列表
看到没,使用jsonp需要配置jsonpCallback。ajax原生jsonp例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
</head>
<body>
<h2>测试jsonp界面</h2>
<a href="#" onclick="get()">发送get请求</a>
</body>
<script type="text/javascript">
function get(){
$.ajax({
url: "http://localhost:8080/test/jsonp",
dataType: "jsonp",
jsonp:"callback", // 默认值是callback,可以修改
success: function (result) {
console.log(result);
$("body").append("<br>" + JSON.stringify(result));
}
});
}
</script>
</html>
select2 ajax jsonp例子:
$("#demo").select2({
placeholder: "请输入",
ajax: {
url: 'http://localhost:8080/test/jsonp', {# ajax后台函数路径 #}
dataType: "jsonp",
type: "GET", {# GET即为前台JS向后台函数取数据,POST反之 #}
quietMillis: 150, {# 延时查询毫秒数 #}
jsonpCallback: "callback",
data: function (term, page) {
return {
search: term,
page: 10
};
},
results: function (data, page) {
return {
results: data {# results结果集,data为后台返回的查询结果 #}
};
}
}
});
后端返回的数据格式:
@GetMapping("/text/jsonp")
public String getJsonp() {
JsonObject data = new JsonObject();
data.put("data","hello_world");
return "callback("+data+")";
}