基于 HTML 的 HTTP POST 请求使用 Ajax 失败答案

【问题标题】：HTML based HTTP POST request failing using Ajax基于 HTML 的 HTTP POST 请求使用 Ajax 失败
【发布时间】：2018-01-23 02:36:20
【问题描述】：

我正在编写一个示例 HTML 代码，其中使用 Ajax 函数调用 HTTP 发布。

我需要如下调用 2 个 HTTP POST 和 1 个 GET 请求（根据正确响应一个接一个）

发布：

网址： http://localhost:8082/consumers/my_testjson_consumer

身体： {“名称”：“my_cons3_instance”，“格式”：“json”，“auto.offset.reset”：“最早”}

Header -> Content-Type : application/vnd.kafka.v2+json

当它得到正确响应时，调用下面的下一个 POST 请求。

发布：

网址： http://localhost:8082/consumers/my_testjson_consumer/instances/my_cons3_instance/subscription

身体： {“主题”：[“testkafka”]}

Header -> Content-Type : application/vnd.kafka.v2+json

当它得到正确响应时，调用下面的下一个 GET 请求。

获取

网址： http://localhost:8082/consumers/my_testjson_consumer/instances/my_cons2_instance/records

下面是第一个请求的示例 HTTP POST 代码：但这不是 POST 请求。

<!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://localhost:8082/consumers/my_testjson_consumer/",
        type: "POST",
        data: { "name": "my_cons3_instance", "format": "json", "auto.offset.reset": "earliest" },
        dataType: "json",
        success: function (result) {
            switch (result) {
                case true:
                        console.log("processResponse");
                    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>

我需要 2 个查询的建议。

我不知道为什么上面的代码没有按预期工作并得到响应。我应该得到回复："{ "instance_id": "my_cons2_instance", "base_uri": "localhost:8082/consumers/my_testjson_consumer/instances/…; }"
如何根据每个人的响应依次调用上述所有 2 POST 请求和 1 GET 请求？

请指教。

【问题讨论】：

标签： html json ajax

【解决方案1】：

在第一个 Post 调用的成功函数中调用第二个 Post 请求，在第二个 post 调用的成功函数中调用 Get 调用。

这是您要放置的结构

$.ajax({method:'post',url:...,success: function(){
 $.ajax({method:'post',url:,..., success: function(){
    $.ajax({method:'get':,..., success: function(){
        //do something here
     }), error: function(){}
  }), error: function(){}
 }), error: function(){}

});

【讨论】：

好的，谢谢。我不确定为什么第一个 http post 方法在那里失败。我应该得到第一个请求的响应： "{ "instance_id": "my_cons2_instance", "base_uri": "localhost:8082/consumers/my_testjson_consumer/instances/…" }"
您想尝试在 ajax 调用中将 'type' 键更改为 'method'。原始的 ajax 定义将它们作为“方法”。我相信该调用不识别“类型”，因此默认为“获取”。
不，方法不起作用。我相信类型是正确的。如果我使用方法，则默认为 GET 方法。