Question

我一直在努力做这项工作：

            $.ajax({
                url: 'http://otherdomain.com/mail.json' ,
                dataType: 'json',
                data: jsonObject,
                success: function(data){
                    alert("Thank you for your inquiry. We will get back to you soon.");                     
                }
            });

当我使用Chrome Postman应用程序进行测试时，mail.json API正常运行，响应标头为：

Accept-Ranges →bytes
Access-Control-Allow-Origin →*
Alternate-Protocol →80:quic,p=0.002
Cache-Control →private
Content-Encoding →gzip
Content-Length →22
Content-Type →application/json; charset=UTF-8
Date →Mon, 15 Sep 2014 05:18:09 GMT
Server →Google Frontend
Vary →Accept-Charset, Accept-Encoding, Accept-Language, Accept

我的Jquery代码可能有什么问题，因为服务器工作正常。

Answer 1

对于跨域ajax调用，最好使用JSONP。您可以在此处获取更多信息： JSONP stackoverflow

Answer 2

当你说，当点击表单提交按钮时，页面会重新加载此ajax调用所在的位置。如果使用异步提交，则应该修改浏览器的默认操作。例如，

$('submit').click(function(e){
    //prevent default action
    e.preventDefault();
    $.ajax({
       url: ,
       success: function(res) {

       }
    })
})

Answer 3

网址http://otherdomain.com/mail.json来自其他域。根据“同源策略”，您不应该发送请求（除非您只是在浏览器中打开HTML文件并部署到服务器，我猜是file:///C:/Projects/HTML5/WebContent/request.html）。

要制作跨域Ajax请求，您可以尝试使用@Vivin建议的JSONP。所以你的jQuery代码可能是这样的：

$.ajax({
        url: url,
        dataType: 'jsonp',
        jsonp: 'jsonpcallback',
    }).done(function(data) { // deal with your data
    });

在服务器端，您需要返回jsonpcallback(YOUR_DATA_IN_JSON_STRING)之类的内容。有关更详细的教程，您可以在线搜索。这是我写的中文教程：JSONP Tutorial

使用Jquery进行跨域Ajax调用

3 个答案: