$.ajax $.getJSON在java中的跨越解决方案

当我在本地开发时，数据需要从另外一台服务器上读取，例如我本地访问时的地址是：lofile:///C:/Users/Administrator/Desktop/%E9%AA%8C%E8%AF%81%E5%AE%9E%E4%BE%8B/ajax/index.html

当如果直接调用ajax访问服务器（http://www.wsc.com/mobile/data.htm）时，就会报一个错误

我换成jsonp来访问，就解决了这个问题，代码如下：

$.ajax({
type:'POST',
dataType:'json',
jsonp: "jsoncallback",
jsonpCallback:"success_jsonpCallback",
url:"http://www.wsc.com/mobile/data.htm",
data:"",//传参
async:false,//异步：type="ture" 同步：type="false"
timeout:10000,
success:function(data){
//alert(JSON.stringify(data));

},
error:function(XMLHttpRequest, textStatus, errorThrown){

}
});

下面是java中的代码，很关键

/**
* 商品
* @param request
* @param response
* @return
* @throws IOException
*/
@RequestMapping(value = "/mobile/data.htm", method = { RequestMethod.GET,RequestMethod.POST })
@ResponseBody
public String test(HttpServletRequest request,HttpServletResponse response){
Map<String,Object> map = null;
List<Object> list = new ArrayList<Object>();
String[] fTitle = new String[]{"雪纺印花百褶裙半身裙,简约的线条和版型上身很好看，整体更有看点。",
"时尚真皮女凉鞋 牛筋底中跟欧美潮鞋 2015夏个性森系女鞋子罗马鞋","藤雷达椅 太阳椅 藤椅躺椅 午休藤睡椅 编藤阳台躺椅 懒人月亮椅",
"一件漂亮的软纱公主裙，配上一又白色高跟鞋子，又美丽又简单。","自制果冻布甸 餐厅专供原料 夏天美食，草莓味",
"雪纺印花百褶裙半身裙,简约的线条和版型上身很好看，整体更有看点。","时尚真皮女凉鞋 牛筋底中跟欧美潮鞋 2015夏个性森系女鞋子罗马鞋",
"藤雷达椅 太阳椅 藤椅躺椅 午休藤睡椅 编藤阳台躺椅 懒人月亮椅","一件漂亮的软纱公主裙，配上一又白色高跟鞋子，又美丽又简单。","自制果冻布甸 餐厅专供原料 夏天美食，草莓味"};
String[] fImg = new String[]{"./main/img/pic1.png","./main/img/pic2.png","./main/img/pic3.png",
"./main/img/pic4.png","./main/img/pic5.png","./main/img/pic1.png","./main/img/pic2.png",
"./main/img/pic3.png","./main/img/pic4.png","./main/img/pic5.png"};
String[] fRecord = new String[]{"123","23","34","21","42","35","46","76","67","34"};
for(int i = 0; i < 10; i++){
map = new HashMap<>();
map.put("id", i);
map.put("fShopID", "f0010541"+i);
map.put("fTitle", fTitle[i]);
map.put("fImg", fImg[i]);
map.put("fPrice", i);
map.put("fPostage", "免邮费");
map.put("fRecord", fRecord[i]);
list.add(map);
}
String callbackName = (String)request.getParameter("jsoncallback");
String json = JsonFormat.ListToJson(list);
String rslt = callbackName + "(" + json + ")";
return rslt;
}

注意：这里返回的数据要是json格式，否则会报错。

$.getJSON的解决方法稍微有点不同

$.getJSON("http://www.wsc.com/mobile/data.htm?jsoncallback=?", function(data) {
alert(JSON.stringify(data));
});

用goole浏览器f12可以看到访问的路径会变成

执行原理：

发送请求时需要传一个callback的回调函数名到服务器端，服务器端拿到这个回调函数名，再将返回数据用参数的形式反回到客户端，这样客户端就能够调到。

所以发送请求URL的地址后面一定要上jsoncallback=?这样的参数，jquery会将?号自动替换成自动生成的回调函数的名称。

所以最终的实际请求为：http://www.wsc.com/mobile/data.htm?jsoncallback=jQuery18305532012025856685_1475928269122&_=1475928269131

与ajax的方式比较，也就是callback函数一个是自动生成的函数名http://www.wsc.com/mobile/data.htm?jsoncallback=success_jsonpCallback&_=1475928337689，

一个是手工指定的函数名。