JS提交表單到PHP的方法

在 Web 開發中，用戶輸入表單數據后需要將這些數據發送給服務器進行處理，而客戶端動態腳本語言 JavaScript 能夠與服務器端的 PHP 腳本語言進行交互。下文將詳述如何使用 JS 將表單數據提交到 PHP。

JS通過Form表單提交到PHP

最簡單的方法是通過form標簽并設置其action屬性值為 PHP 程序的處理地址。如下：

<form action="submit.php" method="post">
<input type="text" name="name">
<button type="submit">提交</button>
</form>

這將向 PHP 文件submit.php發送一個POST請求，并包含一個名為name的變量，以存儲輸入框中的值。

JS使用AJAX方式提交到PHP

除了使用form標簽提交表單之外，還可以使用 AJAX 技術實現異步提交表單數據。AJAX 可以將數據發送到 PHP 文件，并在不刷新頁面的情況下接收數據的響應結果。以下是一個常見的 AJAX 函數：

function ajax(url, data, callback) {
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
callback(xhr.responseText);
}
};
xhr.send(data);
}

這個函數接受三個參數url，data，callback。其中url是 PHP 文件路徑，data是數據，callback是回調函數。這里的數據必須是符合 urlencoder 規范的字符串，如 “name=test&age=20”。提交數據和請求響應的方式都不會刷新頁面。我們可以通過以下方法調用此函數：

var data = new FormData(document.getElementById('myForm'));
ajax('submit.php', data, function(response) {
alert(response);
});

這里先獲取表單元素，然后將其轉換為FormData對象，并將這個對象作為數據參數傳遞給 AJAX 函數。我們使用回調函數，以便在成功時顯示響應信息。

JS通過fetch()方法提交到PHP

fetch() 是一個使用 AJAX 對象進行異步請求的 API，我們可以用它發送 POST 請求。由于 fetch() 方法返回一個 promises 實例，因此可以使用 then() 方法并在其中添加回調函數，來處理服務器的響應。如下：

fetch('submit.php', {
method: 'POST',
body: new FormData(document.getElementById('myForm'))
}).then(response =>{
console.log(response.text());
});

在這里，我們使用fetch()函數的第二個參數傳遞參數。這里的數據是FormData，請求類型是POST，并且將數據發送到 PHP 文件submit.php中。使用response.text()方法來獲取服務器響應的文本內容。

說明：上述的所有方法都可以在 JS 中動態創建表單或者獲取 DOM 元素進行操作，以實現表單提交到 PHP 程序的目的。

結論

以上是 JS 向 PHP 提交表單的幾種方法，考慮到實際需求和場景的不同，可以選擇其中適合自己的方法。而對于 Web 開發人員來說，了解以上幾種方法是十分必要的。