AJAX - 傳送資料物件

在 AJAX 中，我們允許將資料物件作為 HTTP 請求的一部分從客戶端傳送到 Web 伺服器。資料物件是一個包含鍵值對資料的物件。它們通常以 JavaScript 物件的形式表示。因此，在 AJAX 中傳送資料物件意味著我們將結構化資料傳遞給伺服器以進行進一步處理。它可以包含表單輸入、使用者輸入、使用者資訊或任何其他資訊。不僅是資料物件，我們還可以使用 AJAX 以及 XMLHttpRequest 從系統上傳和傳送檔案。

以下是資料物件的格式：

var myDataObject = {
   "name": "Pinky",
   "City": "Pune",
   "Age": 23
}

現在，要使用 XMLHttpRequest 傳送此資料物件，我們需要使用 stringify() 方法將物件轉換為 JSON 字串，因為大多數框架都非常容易地支援 JSON 格式，而無需任何額外的工作。stringify() 方法是 JavaScript 內建函式，用於將物件或值轉換為 JSON 字串。

語法

var myData = JSON.stringify(myDataObject)

這裡 myDataObject 是我們要轉換為 JSON 字串的資料物件。

示例

在以下程式中，我們將使用 XMLHttpRequest 傳送資料物件。為此，我們將建立一個 XMLHttpRequest 物件，然後建立一個包含我們要傳送的資料的資料物件。然後，我們使用 stringify() 函式將資料物件轉換為 JSON 字串，並將頭部設定為“application/json”以告訴伺服器請求包含 JSON 資料。然後，我們使用 send() 函式傳送資料物件，並且響應由回撥函式處理。

<!DOCTYPE html>
<html>
<body>
<script>
   function sendDataObject() {
      // Creating XMLHttpRequest object
      var qhttp = new XMLHttpRequest();
   
      // Creating data object
      var myDataObject = {
         "name": "Monika",
         "City": "Delhi",
         "Age": 32,
         "Contact Number": 33333333
      }
      // Creating call back function
      qhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 201) {
            document.getElementById("sample").innerHTML = this.responseText;
            console.log("Data object Send Successfully")
         }
      };
      // Open the given file
      qhttp.open("POST", 
      "https://jsonplaceholder.typicode.com/todos", true);
   
      // Setting HTTP request header 
      qhttp.setRequestHeader('Content-type', 'application/json')
   
      // Converting data object to a string
      var myData = JSON.stringify(myDataObject)
   
      // Sending the data object to the server 
      qhttp.send(myData)
   }
</script>
   <h2>Sending Data object</h2>
   <button type="button" onclick="sendDataObject()">Submit</button>
   <div id="sample"></div>
</body>
</html>

輸出

結論

因此，這就是我們如何將資料物件傳送到伺服器並相應地更新響應的方式。它允許我們共享資訊並在不重新整理整個頁面的情況下更新資料。因此，在下一篇文章中，我們將學習如何解析 XML 物件。

列印頁面