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。
《JavaScript表单提交》
当自动提交功能取消之后就只能手动提交:
假设一个form表单,里面有姓名、性别、家庭住址,然后有一个按钮来点击提交。
1.创建一个函数GPDate(),首先先获取form表单里的每一条数据。
《JavaScript表单提交》
定义三个变量,通过id获取到对应输入框的value值。
2.获取到值之后通过if判断语句判断这三个值是否获取到,必须同时满足三个值都获取到了。
《JavaScript表单提交》
3.判断通过后通过id获取到Form表单,然后通过点的方式点出Form表单的method和action属性并赋值为通过get或是post提交和提交的路径,最后通过submit方法提交表单。
《JavaScript表单提交》
4.判断如果不通过就返回一个提示数据不完整。
《JavaScript表单提交》
5.函数方法写完之后可以通过获取到按钮设置点击事件,也可以通过事件属性设置点击事件等即可。
二、 JSON数据提交
JSON是轻量级的文本数据交互格式,类似于xml但比xml更小、更快、更易解析。
JSON的语法是数组格式不过和Js不同,它没有变量,没有结尾符。它值可以数组、数字、字符串、布尔值、空值、对象。
要提交JSON数据,首先需要将数据转换成Js的数据格式:
1.先要实例化XMLHttpRequest,它用于后台与服务器数据交互,不过一些老版本浏览器并没有该对象,不过它们都可以使用ActiveXObject对象。
《JavaScript表单提交》
这是固定格式。
2. 然后通过实例化之后的xmlhttp点出open方法准备请求,通过get或是post方式请求通过路径寻找到的文件,open最后一个参数为是否异步。再使用send方法将请求发送到服务器,send参数可以为空也可以写,写参数的情况下只能使用post,参数的内容为需要提交的数据。
《JavaScript表单提交》
3. 请求发送之后需要知道服务器是否响应,这时候可以通过XMLHttpRequest里面的三个属性来进行判断:onreadystatechange存储函数,readyState存有状态(0请求未初始化,1服务器连接已建立,2请求已接收,3请求处理中,4请求已完成,且响应已就绪),status:200为OK,404为未找到页面。
《JavaScript表单提交》
直接判断readyState的值等于4和status值等于200,判断通过之后代表就可以通过responseText或者responseXML获取字符串形式或XML形式的响应数据,这种转换则是将JSON数据格式转换成Js对象,转换成Js对象之后就可以点出对应属性获得数据。
三、 Ajax提交
1.Ajax提交是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
2.也就是所谓的异步。异步指不用进程一直等待当前执行完毕,可以直接执行后面的的进程,当有消息返回时系统会通知进程进行处理,这样可以提高效率。
3.Ajax异步提交方法也是通过XMLHttpRequset来进行数据交互和提交的。
通过固定写法判断并实例化XMLHttpRequset;然后通过open方法进行请求,send方法发送请求;再通过使用XMLHttpRequset三个属性来获取的响应结果对数据进行JSON数据与Js对象的转换。
《JavaScript表单提交》
这是通过连接获取的C#控制器的数据,然后将数据绑定到页面上:
《JavaScript表单提交》
这是数据的获取,反过来数据提交,提交有两种,一种是把页面数据提交给服务器,二是向服务器提交数据FormData,提交的结果都一样,只是下一步的数据处理不一样,
一个是将数据拼接成字符串,
《JavaScript表单提交》
一个是实例化FormData,然后将数据添加到实例化对象里面(data)。
《JavaScript表单提交》
接下来还是固定写法判断并实例化XMLHttpRequset,调用open方法请求并通过send方法发送,这里send就需要传递参数了,将上面的str或者data作为参数传递过去,最后判断响应并对返回数据进行转换处理得出结果。

    原文作者:赤哲~
    原文地址: https://blog.csdn.net/weixin_44540247/article/details/105818175
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞