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开发工作非常重要。在提交过程中，需要注意服务端和客户端的数据处理，以及用户体验。