Question

我尝试向api发出一个简单的请求并取回结果，但我的请求永远不会启动（我也在寻找fiddler）。我做错了什么？

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#button").click(function(){
        makePostRequest("http://www.mocky.io/v2/587ccd320f000081015dxxxx", "dummy_json", null, "post", "json", "div");
    });
});

function makePostRequest(url, data, headers, httpVerb, dataType, elementId){
    alert('click');
    $.ajax({
    url: url,
    type: httpVerb,
    data: data,
    headers: {
        Header_Name_One: 'Header Value One',
        "Header Name Two": 'Header Value Two'
    },
    dataType: 'json',
    success: function (data) {
      alert("success");
    }
}).done(function(msg){
    alert('done');
  });
}
</script>
</head>
<body>

<button id="button">Send an HTTP POST request to a page and get the result back</button>
<div id="div">

</body>
</html>

Answer 1

如果您在控制台中检查请求，则会看到以下错误：

SyntaxError：无法在'XMLHttpRequest'上执行'setRequestHeader'：'Header Name Two'不是有效的HTTP头字段名。

这是因为标题键不能包含空格。如果您将标题更改为Header_Name_Two，则代码可以正常运行：

$(document).ready(function() {
    $("#button").click(function() {
        makePostRequest("http://www.mocky.io/v2/587ccd320f000081015dxxxx", "dummy_json", null, "post", "json", "div");
    });
});

function makePostRequest(url, data, headers, httpVerb, dataType, elementId) {
    $.ajax({
        url: url,
        type: httpVerb,
        data: data,
        headers: {
            Header_Name_One: 'Header Value One',
            Header_Name_Two: 'Header Value Two'
        },
        dataType: 'json',
        success: function(data) {
            alert("success");
        }
    }).done(function(msg) {
        alert('done');
    });
}

Working example

请注意以上

您正在发出跨域请求。 'mocky.io'域名在其响应中不包含CORS标题，您可以在上面提到的新错误中看到：

对预检请求的响应未通过访问控制检查：请求的资源上没有“Access-Control-Allow-Origin”标头

这意味着您需要更改请求以检索JSONP格式的数据 - 假设第三方支持，许多人不支持。或者，您需要在服务器上发出请求，而不是JS。

用ajax发帖子请求

1 个答案: