提交表单POST请求

Web 表单在 HTML 中以
窗体顶端
元素表示，在 JavaScript 中则以 HTMLFormElement 类型表示。 HTMLFormElement 类型继承自 HTMLElement 类型，因此拥有与其他 HTML 元素一样的默认属性。不过，HTMLFormElement 也有自己的属性和方法。 acceptCharset：服务器可以接收的字符集，等价于 HTML 的 accept-charset 属性。
action：请求的 URL，等价于 HTML 的 action 属性。
elements：表单中所有控件的 HTMLCollection。
enctype：请求的编码类型，等价于 HTML 的 enctype 属性。
length：表单中控件的数量。
method：HTTP 请求的方法类型，通常是"get"或"post"，等价于 HTML 的 method 属性。
name：表单的名字，等价于 HTML 的 name 属性。
reset()：把表单字段重置为各自的默认值。
submit()：提交表单。
target：用于发送请求和接收响应的窗口的名字，等价于 HTML 的 target 属性。有几种方式可以取得对元素的引用。最常用的是将表单当作普通元素为它指定一个 id 属性，从而可以使用 getElementById()来获取表单，比如：
let form = document.getElementById("form1");

此外，使用 document.forms 集合可以获取页面上所有的表单元素。然后，可以进一步使用数字索引或表单的名字（name）来访问特定的表单。比如：
// 取得页面中的第一个表单 let firstForm = document.forms[0];
// 取得名字为"form2"的表单 let myForm = document.forms["form2"];
窗体底端
窗体底端
较早的浏览器，或者严格向后兼容的浏览器，也会把每个表单的 name 作为 document 对象的属性。例如，名为"form2"的表单可以通过 document.form2 来访问。不推荐使用这种方法，因为容易出错，而且这些属性将来可能会被浏览器删除。
注意，表单可以同时拥有 id 和 name，而且两者可以不相同。
2、提交表单
表单是通过用户点击提交按钮或图片按钮的方式提交的。提交按钮可以使用 type 属性为"submit" 的或元素来定义，图片按钮可以使用 type 属性为"image"的元素来定义。点击下面例子中定义的所有按钮都可以提交它们所在的表单： Submit Form

如果表单中有上述任何一个按钮，且焦点在表单中某个控件上，则按回车键也可以提交表单。（textarea 控件是个例外，当焦点在它上面时，按回车键会换行。）注意，没有提交按钮的表单在按回车键时不会提交。
以这种方式提交表单会在向服务器发送请求之前触发 submit 事件。这样就提供了一个验证表单数据的机会，可以根据验证结果决定是否真的要提交。阻止这个事件的默认行为可以取消提交表单。例如，下面的代码会阻止表单提交： letform=document.getElementById("myForm"); form.addEventListener("submit", (event) => { // 阻止表单提交 event.preventDefault(); });

调用 preventDefault()方法可以阻止表单提交。通常，在表单数据无效以及不应该发送到服务器时可以这样处理。

当然，也可以通过编程方式在 JavaScript 中调用 submit()方法来提交表单。可以在任何时候调用这个方法来提交表单，而且表单中不存在提交按钮也不影响表单提交。下面是一个例子：
let form = document.getElementById("myForm");

// 提交表单
form.submit();
通过 submit()提交表单时，submit 事件不会触发。因此在调用这个方法前要先做数据验证。

表单提交的一个最大的问题是可能会提交两次表单。如果提交表单之后没有什么反应，那么没有耐心的用户可能会多次点击提交按钮。结果是很烦人的（因为服务器要处理重复的请求），甚至可能造成损失（如果用户正在购物，则可能会多次下单）。解决这个问题主要有两种方式：在表单提交后禁用提交按钮，或者通过 onsubmit 事件处理程序取消之后的表单提交

提交表单POST请求相关推荐

IDEA中Tomcat启动后提交表单，请求的资源[/servlet_demo2/book-add.html]不可用
这个问题非常得刁钻啊,解决办法我很不理解,不知道IDEA为什么这么捉弄人. 首先这里出现问题有两个方面: 1.Tomcat问题: 配置Tomcat得时候非常不容易发现:这里得名字不一样,一个横杠,一个 ...
java客户端重复请求_Java后台防止客户端重复请求、提交表单实现原理
Java后台防止客户端重复请求.提交表单实现原理发布于 2021-1-8| 复制链接摘记: 这篇文章主要介绍了Java后台防止客户端重复请求.提交表单实现原理,文中通过示例代码介绍的非常详细,对大 ...
搭建简单Django服务并通过HttpRequester实现GET/POST http请求提交表单
调试Django框架写的服务时,需要模拟客户端发送POST请求,然而浏览器只能模拟简单的GET请求(将参数写在url内),网上搜索得到了HttpRequester这一firefox插件,完美的实现了模 ...
python网页提交表单_使用Python中的POST请求通过网站表单上传基本文件
我尝试使用Python和HTTP请求在一个随机的网站上上传一个文件.为此,我使用名为Requests的便利库. 根据the documentation,以及StackOverflow here和the ...
JavaScript fetch 方式提交表单请求
最近在研究如何使用 fetch 方法发送表单请求,因为我们一般使用的时候fetch一般会将发送的数据处理成 JSON 字符串的格式进行发送,但是如果提交表单的话由于表单格式需要特殊处理,因为无法直接使 ...
java 提交表单_http常见的form表单请求方式
在Web开发中,我们使用的比较多的HTTP请求方式基本上就是GET.POST. 一.http请求常见的表单文件上传形式首先了解下application/x-www-form-urlencoded和m ...
ajax使用pur请求怎么传参,jQuery使用ajaxSubmit()提交表单示例
ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先引入这个插件.如下所示: 复制代码代码如下: 那么,如何通过ajaxSubmit ...
html提交表单到Servlet
源码地址 https://github.com/YouXianMing/Java-Web-Study/tree/master/Servlet-Form 演示效果(注意post与get提交方式浏览器地址 ...
java jquery提交表单_Jquery ajax提交表单几种方法
在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. ...

提交表单POST请求

提交表单POST请求相关推荐

最新文章

热门文章