Question

您好我必须编写Rest API调用，它将提供跨域请求

我已经向Mozilla（其他客户端）查询了请求，它现在为我提供数据如何通过html中的jquery / javascript写入。

{"POST to adengine":{"method":"POST","url":"http://xxx.com/Advertisement/1.0/GetAds","body":"aid=Apposaurus_xxx","overrideMimeType":false,"headers":[["Content-Type","application/x-www-form-urlencoded"]]}}

以下是我在html中的示例代码

<html>
<title></title>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">

JSONTest = function() {
    var resultDiv = $("#resultDivContainer");
    $.ajax({
        url: "http://xxx.com/Advertisement/1.0/GetAds",
        type: "POST",
        data:  "aid=Apposaurus_xxx",        
        overrideMimeType:'false',
        crossDomain: 'true',
        dataType: 'jsonp',
        headers:{"Content-Type":'application/x-www-form-urlencoded'},

        success: function (result) {
            switch (result) {
                case true:
                     processResponse(result);
                    break;
                default:
                    resultDiv.html(result);
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status);
        }    
});
};
</script>
</head>
<body>


<div id="resultDivContainer"></div>

<button type="button" onclick="JSONTest();">JSON</button>

</body>
</html>

我哪里错了？

Answer 1

跨域请求应使用JSONP完成。 JSONP代表 JSON with Padding 。我会试着在这里解释一下。

您想如何从服务器获取数据（当我们谈论JSON时的脚本）？你有两种方式：

一个ajax请求，它使用XMLHttpRequest对象的实例在场景后面完成，并且仅限于发送到同一个域，
一个简单的HTTP Get请求，通过在HTML文档中的某处插入<script>标记来完成，主要是在head部分。

第二种技术不仅限于跨域策略。但是，让我们来看看浏览器在这两种情况下如何作为我们的代理：

ajax场景：开发者代码=＆gt; browser =＆gt; request =＆gt; server =＆gt; response =＆gt; browser =＆gt;开发者代码。这意味着当您使用ajax时，代表您的浏览器会创建一个HTTP请求（带有X-Requested-With: XMLHttpRequest标头字段）并将其发送到服务器，然后它会获得响应基础，* 但它会为您提供回复，以便作为开发人员，您有机会分析响应并做任何您想做的事情。

HTTP Get场景：开发者代码=＆gt; head =＆gt;中的脚本标记browser =＆gt; request =＆gt; server =＆gt; response =＆gt; browser =＆gt;响应执行。

请参阅？当您使用JSONP时，或者在简单的<script>标记中插入时，浏览器会从服务器返回脚本，但它会运行脚本，这就是结束。您没有被吸引到响应中，并且您无法控制它。因此，您需要为它提供callback函数。 callback({})与{}的不同之处在于，当它被执行时，它会让您有机会获得结果并对其执行某些操作。

Answer 2

您可以稍微更改一下代码并告诉我们登录到控制台的内容吗？请不要使用IE，因为它有一个可怕的console.log实现（显示Object.Object）。使用Firebug的Chrome或Firefox可以做得更好。

建议的更改：

        success: function (result) {
console.log("here is the result:",result);
//            switch (result) {
//                case true:
//                     processResponse(result);
//                    break;
//                default:
//                    resultDiv.html(result);
//            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
console.log("this is the error",arguments);
//        alert(xhr.status);
        }

需要编写基于Javascript / Jquery的跨域请求

2 个答案: