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

Display response to a GET & POST request in a textbox

本文关键字：POST 请求 响应 GET 文本 显示      更新时间：2023-09-26

我正在尝试使用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;
});

下面是HTML代码的一部分，我想在其中适应响应(JSON(格式。

<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>

  1. 将代码放在就绪函数中，或向脚本定义添加 deffer。这样，您的脚本将在加载 DOM 后执行。
  2. 不要像这样在文档上添加事件，它太大了。你正在使用id，这很好，所以使用它：(这取决于您的 DOM 大小，但在大多数情况下，通过 id 找到一个元素，然后向其添加事件。
    3. 在
  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((将其转换为字符串。

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

相关文章：