使用jQuery Ajax向远程服务器发送数据。

Question

我正在开发一个应用程序，它会生成一个JavaScript代码，该代码会在网站上显示一个小部件。当通过小部件表单提交数据时，它会使用jQuery的ajax函数将数据发布到服务器。

问题是，如果我将小部件放在不同主机上的网站上，就永远无法触发success回调。我知道这是因为JavaScript阻止跨域Ajax，并且应该使用JSONP，但我想知道为什么数据被正常发送到服务器后成功事件却没有被触发？

以下是代码：

$.ajax({
  type: 'POST',
  url: report_url,
  data: $(form).serialize(),
  success: function() {
    alert("success called!");
  }
});

如何使用jsonp实现相同的功能？我有些困惑，是否应该使用jsonp以及如何使用，因为它需要定义一个jsonp回调参数。

感谢您的帮助。

- all jazz

Answer 1

你可以尝试使用 JSONP 来实现：

在线演示： http://jsfiddle.net/5CUk2/

(请检查浏览器控制台)

$(function() {

    //Example using flickr API
    var diffDomainUrl = 'http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=mycallback&tags=monkey&tagmode=any&format=json';

    $('#jsonpbtn').on('click', function() {
        $.ajax({
            url: diffDomainUrl,
            dataType: 'jsonp',
            data: {},
            success: function (data, textStatus) {
                console.log(textStatus);
                console.log(data);
            },
            jsonpCallback: 'mycallback'
        });
    });

});

---

顺便说一句，你可以尝试其他可能的“方式”来发起一个跨域请求，看一下这个链接，或许会有帮助：

http://usejquery.com/blog/jquery-cross-domain-ajax-guide

- Oscar Jara