表单提交(表单提交的方式有几种)

http://www.itjxue.com  2023-01-28 15:50  来源:未知  点击次数: 

Js表单提交

表单提交是刚开始学js的朋友很迷惑的一个问题,怎么提交,怎么阻止默认提交,怎么提交表单不跳转等等问题,下面是一些示例

原始的表单提交有 button 按钮提交和 input / 类型的。它们又什么区别呢?

(1) 默认表单提交

(2)默认不会提交表单

(3) 如果在 form ,我们使用了 type=''submit 属性,但是不让表单默认提交,有什么办法呢?看下面

(4) 如果在 form ,我们使用了 type=''button 属性,但是还是需要提交表单,这是可以使用ajax来提交,好处是可以自己控制提交,并且页面不会跳转

(5)若是使用默认提交的方法,且提交之前验证表单,方法看下面

(6) 若是使用了 type='button' 属性,但是还是想实现默认提交的方式怎么办? 看下面

(7) 下面的提交会发生什么?

分析 : 点击提交按钮:

(1)当表单验证失败时,不会触发 form.submit() 函数,所以可以触发 form 的 onsubmit 句柄,又因为该句柄 return false 所以表单不会从该句柄处默认提交,所以 会在控制台打印出 表单的onsubmit事件句柄在form.submit()调用时失效'

(2)当表单验证成功时,会触发 form.submit() 函数提交表单,又因为 form.submit()提交表单的方式与用户单击 Submit 按钮一样,但是表单的 onsubmit 事件句柄不会被调用,所以 控制台不会打印出 表单的onsubmit事件句柄在form.submit()调用时失效

现在表单默认提交的方式基本没人用了,都是ajax异步提交。但是了解一些还是好的。。。

表单元素之提交按钮

表单元素的按钮类型我们可以分为三种:

提交和重置按钮只能在表单中使用,普通按钮则可以在网页的任何地方都可以使用。

当submit按钮被单击时,按钮所在表单中的数据将自动提交到服务器,并不需要编写任何脚本。

reset按钮被单击时,按钮所在的表单中的所有元素都将被清空,或者是设置为元素的默认值。(页面第一次加载时元素所具有的值)

动手小练习

如何批量提交form表单中的数据?

用request.getParameterValues()或者用request.getParameter()就可以批量提交form表单中的数据。

一、input type="submit" 定义用于向表单处理程序(form-handler)提交表单的按钮。表单处理程序通常是包含用来处理输入数据的脚本的服务器页面,表单处理程序在表单的 action 属性中指定。

二、实例

form action="action_page.php"

First name:br

input type="text" name="firstname" value="Mickey"

br

Last name:br

input type="text" name="lastname" value="Mouse"

brbr

input type="submit" value="Submit"

/form

三、action 属性定义在提交表单时执行的动作,向服务器提交表单的通常做法是使用提交按钮。通常,表单会被提交到 web 服务器上的网页。

四、如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息。当您使用 GET 时,表单数据在页面地址栏中是可见的:action_page.php?firstname=Mickeylastname=Mouse。

五、如果要正确地被提交,每个输入字段必须设置一个 name 属性。本例只会提交 "Last name" 输入字段。

六、实例

form action="action_page.php"

First name:br

input type="text" value="Mickey"

br

Last name:br

input type="text" name="lastname" value="Mouse"

brbr

input type="submit" value="Submit"

/form

form表单提交是什么意思

表单。

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。表单使用表单标签定义。

表单在网页中主要负责数据采集功能。

一个表单有三个基本组成部分:表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。

表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。

From表单提交数据的几种方式

1,Form表单的常用属性

2,浏览器提交表单时执行步骤

3,提交方法

4,常见的几种提交方式

enctype为 form 表单数据的编码格式,Content-type为Http传输的数据的编码格式。分清两者

1, get: 表单数据会被 encodeURIComponent 后以参数的形式: name1=value1name2=value2附带在 url? 后面,再发送给服务器,并在 url 中显示出来

2, post: enctype 默认"application/x-www-form-urlencoded"对表单数据进行编码,数据以键值对在http请求体重发送给服务器;如果enctype 属性为"multipart/form-data",则以消息的形式发送给服务器"

在js中定义了其它变量,需要提交的时候携带,这时可以不用表单直接提交(此方法引用了jQuery插件)

(责任编辑:IT教学网)

更多