POST JSON using JavaScript



我正在尝试使用JavaScript做http post,但有些事情出错了。我已经搜索了一下,发现了两个片段,但没有一个是工作的。

第一次尝试:

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id) {
    var xmlhttp = new XMLHttpRequest();
    var url = "http://10.21.6.128:1234/test/test2/teste3/teste4";
    xmlhttp.open("POST", url, true);
    xmlhttp.setRequestHeader("Content-type", "application/json");
    xmlhttp.onreadystatechange = function () { //Call a function when the state changes.
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            alert(xmlhttp.responseText);
        }
    }
    var parameters = JSON.stringify({"Test":"2222","Code":"OP1","Part":"Using","Testing":"Prod"});
    xmlhttp.send(parameters);

}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>

在这个尝试中,没有JSON被抛出,在我的服务器上我得到一个空输入。我用fiddler检查了一下,没有任何东西被张贴。

我又搜索了一些,发现了这个例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<title>My jQuery JSON Web Page</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://10.21.6.128:1234/teste/teste2/teste3/teste4",
        type: "POST",
        data: {"Test":"2222","Code":"OP1","Partner":"Test","Prod":"Prod"},
        dataType: "json",
        success: function (result) {
            switch (result) {
                case true:
                    processResponse(result);
                    break;
                default:
                    resultDiv.html(result);
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status);
        alert(thrownError);
        }
    });
};
</script>
</head>
<body>
<h1>My jQuery JSON Web Page</h1>
<div id="resultDivContainer"></div>
<button type="button" onclick="JSONTest()">JSON</button>
</body>
</html> 

在这种情况下,我得到一个错误的请求,错误400。有人能帮帮我吗?

由于同源策略,POST请求似乎从未被发送。您的fiddler屏幕截图显示了一个OPTIONS请求,这在跨域情况下是预期的。OPTIONS请求用于查明目标服务器是否支持跨域资源共享(CORS)。这被称为飞行前请求。

为了使请求被认为是"相同的域",协议,域和端口都必须匹配。

如果您控制目标服务器,您可以通过输出响应头来启用CORS:

Access-Control-Allow-Origin: *

注:*表示允许所有域,如果更合适,您可以缩小到特定域。

同样,问题中的第二个代码示例将永远不会发送JSON,无论CORS。

  • w3.org/cors

将jQuery添加到第一个示例中,并尝试以下操作:

var parameters = $.param({"Test":"2222","Code":"OP1","Part":"Using","Testing":"Prod"});

var parameters = JSON.stringify({"Test":"2222","Code":"OP1","Part":"Using","Testing":"Prod"});

最新更新