javascript - 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 上？如果不是，那可能是一个错误。也许编写代码的人完全忽略了不使用按钮即可提交表单的可能性。)

为了使示例不那么困惑，我将按钮更改为提交 按钮，并向表单添加提交处理程序而不是向按钮添加点击监听器。然后有提交处理程序 return false或调用e.preventDefault以便所有网络事件都通过 .ajax打电话。