在 JavaScript 中使用 POST 請求提交表單

在 JavaScript 中,你可以使用 HTML 表單執行 POST 請求。post 是一種在 HTML 表單中用於提交或傳送資料到伺服器的方法。

在 JavaScript 中使用 POST 請求提交表單

下面的程式碼向你展示瞭如何使用 JavaScript 在 POST 請求中提交表單。在這裡,我們將建立一個新的釋出請求並將使用者傳送到新的 URL myPath

首先,我們建立了一個函式,它接受三個引數路徑(URL 或端點)、引數(具有鍵值對的物件),最後一個是我們在函式執行時直接初始化的 post 方法建立。

然後使用 document.createElement() 方法,我們將建立一個表單元素並將其儲存在 form 變數中。然後我們將使用 post 方法初始化這個 form.method,然後使用路徑初始化 form.action。最後,我們將建立的表單附加到 DOM 中的 body 標籤。

function sendData(path, parameters, method='post') {

  const form = document.createElement('form');
  form.method = method;
  form.action = path;
  document.body.appendChild(form);

  for (const key in parameters) {
      const formField = document.createElement('input');
      formField.type = 'hidden';
      formField.name = key;
      formField.value = parameters[key];

      form.appendChild(formField);
  }
  form.submit();
}

sendData('/myPath/', {query: 'hello world', num: '1'});

至此,我們已經建立了表單並將其附加到 body 元素上,目前,表單內部不包含任何元素。因此,要在表單中新增資料,我們將使用 parameters 物件,該物件將傳遞給我們的 sendData() 函式。為了迭代這個物件,我們將使用 for 迴圈並從物件中獲取每個鍵。

然後我們將建立一個 input 表單欄位並將其儲存在 formField 變數中。現在我們將它的型別設定為隱藏,因為我們不想在我們的網頁上顯示這個表單。最後,我們將使用 parameters 物件的鍵和值初始化表單欄位 namevalue 引數。

因為在我們的例子中,我們傳遞了一個包含兩個鍵值對的物件;因此,for 迴圈將執行兩次。之後,我們將使用 submit() 方法執行釋出請求並將使用者傳送到不同的端點或 URL,即 myPathsendData() 函式通過傳遞這些引數 sendData('/myPath/', {query: 'hello world', num: '1'}); 來呼叫。

如果你執行上面的程式碼,它會發出一個 POST 請求,然後把你帶到一個新的端點,如下所示。

在 javascript 中提交表單帖子

另一種方法是在 HTML 本身而不是 JavaScript 中建立整個表單。然後在我們的 JavaScript 程式碼中訪問這個表單及其元素,如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <form id="form" action="https://www.wikipedia.org/" method="POST">
        <input id="formField" type="hidden" name="Director" value="James Cameron">
      </form>
    
    <script src="./script.js"></script>
</body>
</html>
function postData(path, name, value){
   	document.getElementById("formField").name  = name;
   	document.getElementById("formField").value = value;
    
    document.getElementById("form").action = path;
    document.getElementById("form").submit();
}

postData("https://www.wikipedia.org/","Writer","Jim Collins");

在這裡,我們直接將 method 作為 POST 新增到 HTML 表單本身。在我們的 postData() 方法中,我們只是將 pathnamevalue 作為 postData("https://www.google.com/","Writer","Jim Collins") 傳遞;。然後我們將使用 document.getElementById() 方法訪問 formField,然後如上所示適當設定值。執行此程式碼後,它將執行 POST 請求並將使用者帶到維基百科網站,如下所示。

在 javascript 中提交表單帖子 - 結果

上述程式碼的工作方式與前面的程式碼相同,但更加簡潔和可讀。