HTML 表单方法与 jQuery 函数类型

Question

我完全是前端开发的新手，刚刚学习 jQuery。

我对“使用 jQuery ajax 提交 HTML 表单”感到困惑。这是一个简单的例子：

<form class="form" action="" method="post">
    <input type="text" name="name" id="name" >
    <textarea name="text" id="message" placeholder="Write something to us"> </textarea>
    <input type="button" onclick="return formSubmit();" value="Send">
</form>

<script>
    function formSubmit(){
        var name = document.getElementById("name").value;
        var message = document.getElementById("message").value;
        var dataString = 'name='+ name + '&message=' + message;
        jQuery.ajax({
            url: "submit.php",
            data: dataString,
            type: "PUT",
            success: function(data){
                $("#myForm").html(data);
            },
            error: function (){}
        });
    return true;
    }
</script>

如您所见，当我们单击按钮Send 时，函数formSubmit() 将被调用，jQuery.ajax 将完成其工作。它将发送一个类型为PUT的http请求。

但是HTML表单中有一个属性method="post"，现在我很困惑。当我们点击按钮时，实际会发生什么？ jQuery.ajax 将在 js 函数中发送请求，但 method="post" 会做什么？还是method="post"可以忽略？如果什么都不做，我们可以将属性method设为空：<form class="form" action="" method="">吗？

附加

现在我意识到这个例子中按钮的类型是button，而不是submit。如果我将类型更改为submit并单击它，会发生什么？它会发送两个http请求，一个post请求来自表单，一个put请求来自jQuery.ajax？

Answer 1

这个例子设计得很糟糕而且令人困惑。

formSubmit 函数只会在单击按钮时被调用。单击按钮时，该函数将运行，并且不会发生其他任何事情；由于输入不是提交按钮，因此表单不会尝试提交。所有网络活动都来自函数内部的jQuery.ajax。在这种情况下，<form> 和 method="post" 将被完全忽略，因为没有提交表单 - 使用的方法将是 .ajax 函数中的方法，即 PUT。

但是如果用户在关注<input type="text" 时按下回车键，该表单仍然是可提交的。如果他们这样做，则不会调用 formSubmit 函数（因为未单击按钮），并且用户的浏览器会将 name 和 message 作为表单数据发送到服务器，在当前页面 - 是的，作为 POST。 （当前页面是否此代码在submit.php 上？如果不是，那可能是一个错误。可能编写代码的人完全忽略了不使用按钮即可提交表单的可能性。）

为了使示例不那么混乱，我将按钮更改为 submit 按钮，并向表单添加提交处理程序，而不是按钮的单击侦听器。然后让提交处理程序return false 或调用e.preventDefault，以便所有网络活动都通过.ajax 调用。

Answer 2

HTML 表单中的method 属性用于在您在没有 Ajax 请求或任何其他脚本语言帮助的情况下发送表单数据。

当您使用 JS 和 Jquery 等脚本语言时，您有机会通过 AJAX 请求发送数据。在 AJAX 请求中，您可以再次定义该方法。因此，它不会依赖 HTML 表单的 method 属性。

您可以关注的资源很少：

• https://api.jquery.com/jquery.ajax/
• https://api.jquery.com/jquery.post/

Answer 3

form 标签通过提供几个内置的默认操作来提供支持，但是由于您已经定义了一个提交按钮并制作了一个手动执行 onclick 的功能，所以 form 标签只会混淆结构。所以最好完全删除表单标签，你的代码看起来像

    <input type="text" name="name" id="name" >
    <textarea name="text" id="message" placeholder="Write something to us"> </textarea>
    <input type="button" onclick="return formSubmit();" value="Send">


<script>
    function formSubmit(){
        var name = document.getElementById("name").value;
        var message = document.getElementById("message").value;
        var dataString = 'name='+ name + '&message=' + message;
        jQuery.ajax({
            url: "submit.php",
            data: dataString,
            type: "PUT",
            success: function(data){
                $("#myForm").html(data);
            },
            error: function (){}
        });
    return true;
    }
</script>

Answer 4

其实method和action标签在你不使用任何ajax请求的时候很有用。

➡️假设你没有使用ajax请求那么会发生什么？

1. 由于您的 method 是 POST，它会将表单数据附加到 HTTP 请求的正文中。
2. 然后将表单数据发送到action属性中指定的页面。

但是由于您现在通过ajax 手动控制表单提交。你可以跳过那些attributes。在这种情况下，您可以在您的 formSubmit 方法中指定提交完成后要执行的操作。

您还可以使用preventDefault 阻止form 提交。 例如：

<form onSubmit="formSubmit(event);">
  <button>submit</button>
</form>

function formSubmit(e) {
  e.preventDefault();
  // Now you can set where to go when your form is submitted successfully.
}