显示对文本框中的GET和POST请求的响应

Question

我试图在使用jquery的我的网页上的文本框内获得GET请求的响应。目前，我有以下代码，我可以在控制台上获得响应。

$(document).on('click', '#get-button', function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     type: "GET", 
     url: $("#url").val(), 
     data: '', 
     success: function(response, textStatus, XMLHttpRequest) { 

      console.log(response); 
     } 
    }); 
    return false; 
}); 

$(document).on('click', '#post-button', function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     type: "POST", 
     url: $("#url").val(), 
     data: $("#json-data").serialize(), 
     success: function(response, textStatus, XMLHttpRequest) { 

      console.log(response); 
     } 
    }); 
    return false; 
}); 

下面是我想要适应响应（以JSON格式）的HTML代码的一部分。

<div class="container"> 
<div class="row"> 
    <div class="col-md-12"> 
    <div class="panel panel-danger"> 
     <div class="panel-heading">JSON Response</div> 
     <div class="panel-body text-danger"> 
     <textarea class="form-control" rows="8" placeholder="server response"></textarea> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

1. 将您的代码准备功能，或增加deffer到脚本定义。这样你的脚本就会在DOM加载后执行。
2. 不要像这样在docuemnt上添加事件，它太大了。你使用的是ID，这很好，所以使用它:)这取决于你的DOM大小，但在大多数情况下通过ID找到一个元素，然后添加事件。
3. 将ID添加到您的文本框中，这将更加实用和更快。

。

$(document).ready(function(){ 

    $('#get-button').on('click', function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     type: "GET", 
     url: $("#url").val(), 
     success: function(response) { 
     console.log(response); 
     $('.form-control').val(response); // personally I would give your textbox an ID 
     } 
    }); 
    return false; 
    }); 

    $('#post-button').on('click', function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     type: "POST", 
     url: $("#url").val(), 
     data: $("#json-data").serialize(), 
     success: function(response) { 
     console.log(response); 
     $('.form-control').val(response); 
     } 
    }); 
    return false; 
    }); 
}) 

如果您的网址是正确的，这将起作用。请记住，获得响应后，您将得到一个JSON对象，您将不得不使用JSON.stringify（）将其转换为String。

我会尽力解释。在Javascript中，我们有对象和简单类型（布尔，字符串，浮点等）。当我们想打印一个简单的类型时，我们只是看到它的价值。但是当我们想要显示一个对象时，JS引擎有问题，因为每个对象都可能非常大，很复杂。这就是为什么当打印一个对象或JSON（女巫是一个对象），我们得到[对象]。 Luckilly JSON非常流行，JS有一个将字符串序列化为JSON（JSON.parse（someString））和其他方法（JSON.stringify（JSONObject））的默认方法。