基于HTML的HTTP POST请求使用Ajax

时间:2018-01-23 02:36:21

标签: html json ajax

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

我需要调用2个HTTP POST和1个GET请求,如下所示(基于正确的响应,一个接一个)。

  1. POST:
  2. URL: http://localhost:8082/consumers/my_testjson_consumer

    身体: {“name”:“my_cons3_instance”,“format”:“json”,“auto.offset.reset”:“earliest”}

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

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

    1. POST:
    2. URL: http://localhost:8082/consumers/my_testjson_consumer/instances/my_cons3_instance/subscription

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

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

      当得到正确答案时,请拨打下面的下一个GET请求。

      1. GET
      2. URL: 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个查询。

        1. 我不知道为什么上面的代码没有按预期工作并得到回复。我应该回复:"{ "instance_id": "my_cons2_instance", "base_uri": "localhost:8082/consumers/my_testjson_consumer/instances/…; }"

        2. 我怎样才能根据每个人的回复调用上面提到的所有2个POST请求和1个GET?

        3. 请告知。

1 个答案:

答案 0 :(得分:0)

在第一个Post调用的成功函数中调用第二个Post请求,在第二个post调用的success函数中调用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(){}

});