JavaScript表单提交

表单提交在前端编程阶段中也是一个重点。它是由页面数据保存到后台数据库的重要枢纽，通过表单提交的方式将数据上传到数据库进行保存。同时这些数据也包含用户信息、统计信息、日志信息等等。
数据的信息不同，上传的方式也不同。在JavaScript中有四种种表单提交的方式：
一、 Form表单手动提交（get与post）
在没有任何Js代码的影响下，Form表单本身是自带提交功能的。在form元素标签上有两个属性：
(1) action：设置表单提交的路径（URL）
(2) method：设置表单提交的方式
表单提交的路径分为两种：
(1) 相对路径：指站点内的文件，就是本地文件。
(2) 绝对路径：指其它站点，就比如从本站点到百度。
设置表单提交方式属性的值有两种：get提交和post提交。如果method不指名提交方式则默认为get提交。
这两种提交方式需要分别对应不同情况使用：
(1) 相对于post提交而言，get提交更简单也更快，但是传输的容量小，在提交表单时，所有的信息都会暴露在url上，并不安全，通常用来获取数据。
(2) post提交方式能够传输的容量基本上是无穷的，而且提交的数据直接在后台进行处理，保证了数据的安全性，而且在更新数据传输大量数据、传输音频图片或者特殊符号等情况时，就只能使用post，而非get。
通常情况下，我们会取消Form表单的自动提交功能，通过一个onsubmit属性赋值为return false。

当自动提交功能取消之后就只能手动提交：
假设一个form表单，里面有姓名、性别、家庭住址，然后有一个按钮来点击提交。
1.创建一个函数GPDate(),首先先获取form表单里的每一条数据。

定义三个变量，通过id获取到对应输入框的value值。
2.获取到值之后通过if判断语句判断这三个值是否获取到，必须同时满足三个值都获取到了。

3.判断通过后通过id获取到Form表单，然后通过点的方式点出Form表单的method和action属性并赋值为通过get或是post提交和提交的路径，最后通过submit方法提交表单。

4.判断如果不通过就返回一个提示数据不完整。

5.函数方法写完之后可以通过获取到按钮设置点击事件，也可以通过事件属性设置点击事件等即可。
二、 JSON数据提交
JSON是轻量级的文本数据交互格式，类似于xml但比xml更小、更快、更易解析。
JSON的语法是数组格式不过和Js不同，它没有变量，没有结尾符。它值可以数组、数字、字符串、布尔值、空值、对象。
要提交JSON数据，首先需要将数据转换成Js的数据格式：
1.先要实例化XMLHttpRequest，它用于后台与服务器数据交互，不过一些老版本浏览器并没有该对象，不过它们都可以使用ActiveXObject对象。

这是固定格式。
2. 然后通过实例化之后的xmlhttp点出open方法准备请求，通过get或是post方式请求通过路径寻找到的文件，open最后一个参数为是否异步。再使用send方法将请求发送到服务器，send参数可以为空也可以写，写参数的情况下只能使用post，参数的内容为需要提交的数据。

3. 请求发送之后需要知道服务器是否响应，这时候可以通过XMLHttpRequest里面的三个属性来进行判断：onreadystatechange存储函数，readyState存有状态（0请求未初始化，1服务器连接已建立，2请求已接收，3请求处理中，4请求已完成，且响应已就绪），status：200为OK,404为未找到页面。

直接判断readyState的值等于4和status值等于200，判断通过之后代表就可以通过responseText或者responseXML获取字符串形式或XML形式的响应数据，这种转换则是将JSON数据格式转换成Js对象，转换成Js对象之后就可以点出对应属性获得数据。
三、 Ajax提交
1.Ajax提交是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
2.也就是所谓的异步。异步指不用进程一直等待当前执行完毕，可以直接执行后面的的进程，当有消息返回时系统会通知进程进行处理，这样可以提高效率。
3.Ajax异步提交方法也是通过XMLHttpRequset来进行数据交互和提交的。
通过固定写法判断并实例化XMLHttpRequset；然后通过open方法进行请求，send方法发送请求；再通过使用XMLHttpRequset三个属性来获取的响应结果对数据进行JSON数据与Js对象的转换。

这是通过连接获取的C#控制器的数据，然后将数据绑定到页面上：

这是数据的获取，反过来数据提交，提交有两种，一种是把页面数据提交给服务器，二是向服务器提交数据FormData，提交的结果都一样，只是下一步的数据处理不一样，
一个是将数据拼接成字符串，

一个是实例化FormData，然后将数据添加到实例化对象里面（data）。

接下来还是固定写法判断并实例化XMLHttpRequset，调用open方法请求并通过send方法发送，这里send就需要传递参数了，将上面的str或者data作为参数传递过去，最后判断响应并对返回数据进行转换处理得出结果。

JavaScript表单提交相关推荐

html表单提交及用户名校验,javascript表单提交验证（用户名，邮箱，，，，，）...
无标题文档 div { font-size: 14px; color: #F00; } .inputstyle { width: 150px; } //用户名验证 function checkUser ...
Javascript阻止表单提交
Javascript阻止表单提交 Html 1.<form name="loginForm" action="login.aspx" method=&qu ...
js表单提交 php,JavaScript提交表单的几种方法
在我们工作中我们会经常使用到form表单,相信大家再熟悉不过了,那么提交表单有很多种方法,JavaScript提交表单的方法又是如何呢,今天就带大家介绍下JavaScript提交表单的几种方法! 第一 ...
如何通过纯javascript实现表单提交
如何通过纯javascript实现表单提交通常,如果是POST方法,一般使用vuejs+axios,或使用Jquery实现表单提交.有些地方,我想使用纯JS实现,比方简单的登陆跳转.话不多说,看原代 ...
html表单提交按钮代码,JavaScript在form表单中使用button按钮实现submit提交方法
submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上. ...
javascript实现表单提交加密
通常表单的提交有两种方式,一是直接通过html的form提交,代码如下: <form action="" method="" id="forms ...
JavaScript的form表单提交
开发工具与关键技术: VS 与 JS 作者:摆烂小明撰写时间:2022 年 4 月 17 日 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
JavaScript 表单与表单验证
JavaScript 表单 JavaScript 表单验证 HTML 表单验证可以通过 JavaScript 来完成. 以下实例代码用于判断表单字段(fname)值是否存在,如果存在,则弹出信息,否则 ...
javascript 表单验证大全（一）
javascript 表单验证大全(一) 5.身份证验证:包括15位和18位.function idNumber(s)//身份证验证 {regu1=/^[1-9]\d{7}((0\d)|(1[0-2] ...
Vue中使用form表单提交刷新问题
vue中使用表单form默认提交行为是刷新一下,在这儿我们使用事件修饰符prevent来阻止form表单的默认行为在@click后面跟上prevent 这样就可以阻止form表单默认刷新行为了 &l ...

JavaScript表单提交

JavaScript表单提交相关推荐

最新文章

热门文章