我完全是前端开发的新手，刚刚学习 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 请求吗？
4 回答
qq_花开花谢_0
TA贡献1835条经验 获得超6个赞
这个例子设计得很糟糕并且令人困惑。
formSubmit仅当单击按钮时才会调用该函数。单击按钮时，该函数将运行，并且不会发生其他任何事情；由于输入不是提交按钮，因此表单不会尝试提交。所有网络活动都将由jQuery.ajax函数内部产生。在这种情况下， the<form>和 themethod="post"会被完全忽略，因为表单不会被提交 - 使用的方法将是函数中的方法.ajax，即 PUT。
但是，如果用户在聚焦于<input type="text". 如果他们这样做，那么该formSubmit函数将不会被调用（因为未单击按钮），并且用户的浏览器将在当前页面上将name和 作为message表单数据发送到服务器 - 是的，作为 POST。（这段代码是在当前页面吗submit.php？如果不是，那可能是一个错误。也许编写代码的人完全忽略了不使用按钮即可提交表单的可能性。）
为了使示例不那么混乱，我将按钮更改为提交按钮，并向表单添加提交处理程序，而不是向按钮添加单击侦听器。然后使用提交处理程序return false或调用，e.preventDefault以便所有网络活动都通过该.ajax调用。
炎炎设计
TA贡献1808条经验 获得超4个赞
HTML 表单中的属性method用于在不借助 Ajax 请求或任何其他脚本语言的情况下发送表单数据时发送表单数据。
当您使用 JS 和 Jquery 等脚本语言时，您有机会通过 AJAX 请求发送数据。在 AJAX 请求中，您可以再次定义该方法。因此，它不会依赖于 HTML 表单的method属性。
您可以关注的资源很少：
慕的地6264312
TA贡献1817条经验 获得超6个赞
实际上，当您不使用任何 ajax 请求时，标签很有用method。action
➡️假设你没有使用该ajax请求那么会发生什么？
由于您
method是POST它会将表单数据附加到 HTTP 请求的正文中。然后表单数据被发送到
action属性中指定的页面。
但由于您现在通过 手动控制表单提交ajax。您可以跳过这些attributes。在这种情况下，您可以在您的formSubmit方法中指定提交完成后要执行的操作。
您还可以form使用 来阻止提交preventDefault。例如：
<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.
}
LEATH
TA贡献1936条经验 获得超6个赞
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>
添加回答
举报
0/150
提交
取消