From表單提交詳解

一、From表單提交地址

From表單提交是Web中重要的傳遞用戶輸入信息的機制，提交的目標可以是同一頁面，也可以是另一個頁面。如果目標是同一頁面，可以不指定提交地址。如果目標是其他頁面，則需要指定提交地址。指定提交地址可以使用action屬性。

<form action="submit.php">
    ...
</form>

實際應用中，提交地址往往需要與後端接口對接，需要知道接口地址，例如：

<form action="http://www.xxx.com/submit" method="post">
    ...
</form>

二、From表單提交文件後端null

對於一些小型Web應用，可以在前端直接處理from表單的提交，不需要後端接收處理。這時可以把action設置為”#”或者不設置。對於未設置的情況，瀏覽器默認提交到當前頁面，在本頁面中處理。

<form action="#">
    ...
</form>

三、From表單提交及返回

from表單提交後，等待服務端的處理，等待過程中可以顯示提示信息或者提示用戶信息正在處理。

<form id="myForm">
    ...
</form>
<script>
    document.getElementById("myForm").onsubmit = function() {
        alert("正在提交，請稍等...");
        return true;
    };
</script>

提交完成後，需要得到服務端返回的處理結果。可以通過form元素的onsubmit事件來做到.

<form id="myForm">
    ...
</form>
<div id="result"></div>
<script>
    document.getElementById("myForm").onsubmit = function() {
        var xhr = new XMLHttpRequest();
        xhr.open(this.method, this.action);
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4 && xhr.status === 200) {
                document.getElementById("result").innerHTML = xhr.responseText;
            }
        };
        xhr.send(new FormData(this));
        return false;
    };
</script>

四、From表單提交的方式

from表單提交可以使用兩種方法：GET方法和POST方法。GET方式將表單內容附加到URL後面，POST方式將內容放在請求體中。GET方式有長度限制，但是可以緩存重複請求，POST方式沒有長度限制，但不可以緩存重複請求。應用時需要根據需求進行選擇。

<form action="#" method="get">
    ...
</form>
<form action="#" method="post">
    ...
</form>

五、From表單提交取消

在from表單提交過程中，有可能用戶會意識到輸入的內容有誤，需要取消這次提交，這時可以使用reset方法。

<form id="myForm">
    ...
</form>
<button type="button" onclick="document.getElementById('myForm').reset()">取消</button>
<button type="submit">提交</button>

六、From表單提交後端如何接收數據

from表單提交後，通過POST方式將表單內容放在了請求體中，服務端需要解析請求體，獲取表單內容。在PHP中，可以通過$_POST數組獲取。

//form.html
<form action="submit.php" method="post">
    <input type="text" name="username">
    <input type="password" name="password">
</form>

//submit.php
$username = $_POST['username'];
$password = $_POST['password'];
echo "用戶名: ".$username."
密碼：".$password;

七、From表單提交沒有數據

對於from表單內容為空的情況下，提交的請求體也是空的。服務端在解析請求體的時候，需要做相應的處理防止出現Notice提示。

$username = isset($_POST['username']) ? $_POST['username'] : "";
$password = isset($_POST['password']) ? $_POST['password'] : "";

八、From表單提交的兩種方式

from表單提交可以使用JavaScript來實現，不需要刷新頁面，提高了用戶的體驗。以下是兩種方式的代碼示例。

//方式一
<form id="myForm">
    ...
</form>
<button type="button" onclick="submitForm()">提交</button>
<script>
    function submitForm() {
        var xhr = new XMLHttpRequest();
        xhr.open(document.getElementById("myForm").method, document.getElementById("myForm").action);
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4 && xhr.status === 200) {
                document.getElementById("result").innerHTML = xhr.responseText;
            }
        };
        xhr.send(new FormData(document.getElementById("myForm")));
    }
</script>

//方式二
<form id="myForm" onsubmit="submitForm(event)">
    ...
</form>
<button type="submit">提交</button>
<script>
    function submitForm(event) {
        event.preventDefault();
        var xhr = new XMLHttpRequest();
        xhr.open(document.getElementById("myForm").method, document.getElementById("myForm").action);
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4 && xhr.status === 200) {
                document.getElementById("result").innerHTML = xhr.responseText;
            }
        };
        xhr.send(new FormData(document.getElementById("myForm")));
    }
</script>

九、From表單提交後無反應

在from表單提交後，如果出現無反應的情況，可能是因為from表單提交的內容不符合要求。可以使用瀏覽器提供的開發者工具進行調試，查看服務端是否有返回錯誤信息。

總結

from表單提交是Web開發中常用的重要機制，掌握常用的from表單提交方法，對Web開發工作非常重要。在提交過程中，需要注意服務端和客戶端的數據處理，以及用戶體驗。