2018年4月16日

ajax 使用 jsonp 跨域

可以先看 jsonp 教程

记录下自己的实际使用方式。(最基本的用法)

前台部分

在 ajax 调用中增加 dataType、jsonp 参数以及 success 回调。

$.ajax({
    url: xxurl, // 后台接受请求的 url
    data: {xx}, // 要传给后台的数据
    dataType: 'jsonp',
    jsonp: 'callback',
    success: function(res) {
        // 在此执行回调
        // res为后台返回的 json 对象
    }
});

注意:

  • 不支持 POST 方法。
  • 只能异步。设置 async: false 无效。
  • 由于只能异步,如果要兼容 safari,不能在回调函数中调用 window.open。

后台部分

譬如,jo 是一个包含返回数据的 JSONObject,以前的返回值为 jo.toString()。改为 jsonp 后,返回值为前台传来的参数 callback 的值加上”(” + jo.toString() +”)”。

代码片段:

        String callback = WebUtils.getHTTPRequestParameter(req, "callback");
        if (StringUtils.isEmpty(callback)) {
            WebUtils.printAsJSON(res, jo);
        } else {
            WebUtils.printAsString(res, callback + "(" + jo.toString() + ")");
        }

这段代码兼容了普通 ajax 调用和 jsonp 方式调用。WebUtils.printAsString 是封装好的一个方法,用于向客户端返回数据。

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注


*