javascript裡怎麼寫post提交

在前端開發中，我們常常需要使用AJAX技術來發送HTTP請求，其中包含POST請求。本文將介紹如何在JavaScript中撰寫POST請求。

一、POST請求的基本概念

首先，我們需要了解POST請求的基本概念。

在HTTP協定中，GET和POST都是常用的請求方式，主要區別在於：

1. GET請求把參數直接放在URL中傳遞，而POST請求則把參數放在請求體中。
2. GET請求傳輸資料量較小，一般不超過1KB，而POST請求則沒有限制，可以傳輸大量資料。
3. GET請求是不安全的，因為URL中的參數可以被使用者檢視或修改，而POST請求則相對安全一些，因為參數被放在請求體中。

以上就是POST請求的基本概念，接下來我們將介紹如何在JavaScript中撰寫POST請求。

二、使用XMLHttpRequest物件發送POST請求

在JavaScript中，我們可以使用XMLHttpRequest物件來傳送HTTP請求，包括GET和POST請求。

XMLHttpRequest物件是一個JavaScript API，可以用於在後台與伺服器交換資料。它可以透過AJAX技術實現非同步載入數據，並能夠更新頁面，而無需重新載入整個頁面。

下面是使用XMLHttpRequest物件發送POST請求的基本步驟：

1. 建立XMLHttpRequest物件

首先，我們需要建立一個XMLHttpRequest物件。可以使用以下程式碼實作：

var xhr = new XMLHttpRequest();

2. 設定請求的路徑和參數

接下來，我們需要設定請求的路徑和參數。這些參數將會被放在請求體中。可以使用以下程式碼實現：

xhr.open('POST', 'http://example.com/api', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send('name=John&age=25');

在上面的程式碼中，我們設定了請求的路徑為http://example.com/api，參數為name=John和age=25。

另外，也設定了請求頭Content-type為application/x-www-form-urlencoded。這是標準的POST請求頭，告訴伺服器請求體中的參數是key-value格式。

3. 接收伺服器傳回的資料

最後，我們需要接收伺服器傳回的資料。可以使用以下程式碼實作：

xhr.onreadystatechange = function() {
  if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
    console.log(xhr.responseText);
  }
}

在上面的程式碼中，我們設定了XMLHttpRequest的onreadystatechange事件處理函數。當readyState變成4（即請求完成）且狀態碼為200時，表示伺服器已成功回應，並且傳回了資料。這時，可以透過xhr.responseText取得伺服器傳回的資料。

三、使用fetch API發送POST請求

除了XMLHttpRequest對象，還可以使用fetch API來發送POST請求。 fetch API是標準的JavaScript API，用於在客戶端和伺服器之間發送HTTP請求，並使用Promise物件封裝伺服器回應。

下面是使用fetch API發送POST請求的基本步驟：

1. 設定請求的路徑和參數

首先，我們需要設定請求的路徑和參數。可以使用以下程式碼實現：

fetch('http://example.com/api', {
  method: 'POST',
  headers: {
    'Content-type': 'application/x-www-form-urlencoded'
  },
  body: 'name=John&age=25'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

在上面的程式碼中，我們設定了請求的路徑為http://example.com/api，參數為name=John和age=25。

另外，也設定了請求頭Content-type為application/x-www-form-urlencoded。這是標準的POST請求頭，告訴伺服器請求體中的參數是key-value格式。

2. 接收伺服器傳回的資料

最後，我們需要接收伺服器傳回的資料。可以使用fetch API的Promise物件來處理。可以使用以下程式碼實作：

.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

在上面的程式碼中，我們使用response.json()方法將回應體轉換為JSON格式，並透過then()方法處理回應數據，透過catch()方法處理異常情況。

四、總結

透過本文介紹的方法，我們可以在JavaScript中編寫POST請求，包括使用XMLHttpRequest物件和fetch API。這些方法都能夠實現異步加載數據，並能夠更新頁面，而無需重新加載整個頁面。可以根據實際需求選擇合適的方法來傳送POST請求。

以上是javascript裡怎麼寫post提交的詳細內容。更多資訊請關注PHP中文網其他相關文章！