JavaScript表单提交「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

表单提交在前端编程阶段中也是一个重点。它是由页面数据保存到后台数据库的重要枢纽，通过表单提交的方式将数据上传到数据库进行保存。同时这些数据也包含用户信息、统计信息、日志信息等等。
数据的信息不同，上传的方式也不同。在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作为参数传递过去，最后判断响应并对返回数据进行转换处理得出结果。