HTML Form 方法与 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 将执行其工作。它将发送一个类型为 的 http 请求PUT。

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

额外的

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

Answer 1

这个例子设计得很糟糕并且令人困惑。formSubmit仅当单击按钮时才会调用该函数。单击按钮时，该函数将运行，并且不会发生其他任何事情；由于输入不是提交按钮，因此表单不会尝试提交。所有网络活动都将由jQuery.ajax函数内部产生。在这种情况下， the<form>和 themethod="post"会被完全忽略，因为表单不会被提交 - 使用的方法将是函数中的方法.ajax，即 PUT。但是，如果用户在聚焦于<input type="text".&nbsp;如果他们这样做，那么该formSubmit函数将不会被调用（因为未单击按钮），并且用户的浏览器将在当前页面上将name和 作为message表单数据发送到服务器 - 是的，作为 POST。（这段代码是在当前页面吗submit.php？如果不是，那可能是一个错误。也许编写代码的人完全忽略了不使用按钮即可提交表单的可能性。）为了使示例不那么混乱，我将按钮更改为提交按钮，并向表单添加提交处理程序，而不是向按钮添加单击侦听器。然后使用提交处理程序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

实际上，当您不使用任何 ajax 请求时，标签很有用method。action➡️假设你没有使用该ajax请求那么会发生什么？由于您method是POST它会将表单数据附加到 HTTP 请求的正文中。然后表单数据被发送到action属性中指定的页面。但由于您现在通过 手动控制表单提交ajax。您可以跳过这些attributes。在这种情况下，您可以在您的formSubmit方法中指定提交完成后要执行的操作。您还可以form使用 来阻止提交preventDefault。例如：<form onSubmit="formSubmit(event);">&nbsp; <button>submit</button></form>function formSubmit(e) {&nbsp; e.preventDefault();&nbsp; // Now you can set where to go when your form is submitted successfully.}

Answer 4

form 标签通过提供几个内置的默认操作来提供支持，但由于您已经定义了一个提交按钮并创建了一个要手动执行 onclick 的函数，因此 form 标签只会混淆结构。因此，最好完全删除表单标签，您的代码将如下所示&nbsp; &nbsp; <input type="text" name="name" id="name" >&nbsp; &nbsp; <textarea name="text" id="message" placeholder="Write something to us"> </textarea>&nbsp; &nbsp; <input type="button" onclick="return formSubmit();" value="Send"><script>&nbsp; &nbsp; function formSubmit(){&nbsp; &nbsp; &nbsp; &nbsp; var name = document.getElementById("name").value;&nbsp; &nbsp; &nbsp; &nbsp; var message = document.getElementById("message").value;&nbsp; &nbsp; &nbsp; &nbsp; var dataString = 'name='+ name + '&message=' + message;&nbsp; &nbsp; &nbsp; &nbsp; jQuery.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: "submit.php",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: dataString,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "PUT",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function(data){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#myForm").html(data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: function (){}&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; return true;&nbsp; &nbsp; }</script>