使用 JavaScript 和 AJAX，我是不是仍需要 HTML <form> 标签，是不是仍需要使用“提交”按钮向服务器提交表单？

Posted 2023-03-05

【中文标题】使用 JavaScript 和 AJAX，我是不是仍需要 HTML <form> 标签，是不是仍需要使用“提交”按钮向服务器提交表单？

【英文标题】：With JavaScript and AJAX, do I still need the HTML <form> tag and do I still need to submit forms to the server using a "submit" button?使用 JavaScript 和 AJAX，我是否仍需要 HTML <form> 标签，是否仍需要使用“提交”按钮向服务器提交表单？

【发布时间】：2011-07-23 04:06:20

【问题描述】：

当我学习 html 时，CGI 是王道，与服务器交互的正确方法是将 <input> 标签放在 <form> 标签内。当用户按下“提交”按钮时，会向服务器发送 HTTP GET 或 HTTP POST 消息，并使用服务器上 CGI 程序返回的 HTML 代码刷新浏览器。

现在我又开始做网络工作了，我一直在学习 javascript 和 jQuery。既然jQuery可以拦截click、keypress和focusout等事件，并且可以读取$.ajax()和$.getJSON()的数据，那还需要<form>标签吗？

如果我想支持关闭 JavaScript 的用户，也许“真实表单”仍然是必要的？

【问题讨论】：

您应该将 JavaScript 视为表示层的“额外”，而不是 HTML 标准的替代品。是的，您可以使用 JavaScript 行为代替 DOM 行为。但是，就像在 45 英里/小时的区域内可以以 90 英里/小时的速度行驶一样，您真的不应该这样做。有关更多信息，请参阅关于 Unobtrusive JavaScript 的 wiki 文章：en.wikipedia.org/wiki/Unobtrusive_JavaScript

如果我能总结到目前为止的答案，听起来

【参考方案1】：

如果您使用 ajax，只要您没有任何直接的帖子或获取，则不需要表单标签。但是，它仍然是很好的 html 设计。

【参考方案2】：

表单仍然可以帮助您，但简短的回答是否定的，不是真的。

如果您有一组与某个 AJAX 请求相关的输入，那么出于验证/序列化目的，将它们保留在自己的形式中可能会更容易。例如：

$.ajax(
    url: 'ajax/test.html',
    dataType: 'json',
    method: 'POST',
    content: $('form#login_form').serialize(), // <-- Serialize elements only in
    success: function(data)                   //     the login_form container.
        $('.result').html(data);
    
);

根据您的要求，您可能需要保留您的表单，以便为关闭 Javascript 的用户提供良好的降级效果。您仍然需要提交表单，因此设置并准备好表单是个好主意。

【参考方案3】：

您可以同时提交或不提交。它可以取决于您想要收听哪个表单元素以进行更改。但是你可以这样做只是一个例子：

<SELECT NAME="tree" onchange="doSomething( someVar );">

但同样，这取决于您要操作页面的哪个元素。