顯示對文本框中的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））的默認方法。