JavaScript表单提交

article/2025/9/21 17:31:57

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


http://chatgpt.dhexx.cn/article/mmYlaO3F.shtml

相关文章

表单提交的四种方式

表单提交的四种方式开发工具与关键技术:VS ,JavaScript ,Ajax 作者:刘任锋 撰写时间:2021年5月7日内容:将from表单里的内容提交到控制器上。 HTML布局 JS:先获取姓名,性别&#xff0…

表单的提交方式

表单有两个较特殊的属性,一个是method,是规定用于发送表单的HTTP方法(提交表单的方式);还有一个是action,是规定当提交时向何处发送表单的数据(要提交表单的地址)。Form表单有一个自…

InputStream的read()读取机制

public void readArr() {// 明确文件File file new File("D:/net.txt");// 构建流的对象InputStream inputStream null;try {inputStream new FileInputStream(file);// 声名缓冲数组int i;byte[] bytes new byte[5];while ((i inputStream.read(bytes)) ! -1) …

java中的InputStream,OutputStream,Read,Writer

Java 中定义了两种类型的流:字节型,和字符型。 字节流:处理字节的输入和输出。包括读写二进制数据等方面的内容。 字符流:处理字符的输入和输出。他采用的是 Unicode 编码,可以实现国际化。使用字符流的另外一个好处…

InputStreamReader和OutputStreamWriter 的区别和用法

一、InputStreamReader 用于将一个字节流中的字节解码成字符 , 用法如下 Testpublic void Test19() throws Exception {InputStream in new FileInputStream("C:/hello.txt");// 读取文件的数据,注意文件编码为UTF-8,防止读取乱码// 将输入的字节流 ---…

InputStream.read() 和 OutputStream.write()方法

InputStream.read() 和 OutputStream.write()方法组合使用可以完成文件的复制功能。 先贴出代码 InputStream inputStream new FileInputStream(file);OutputStream os response.getOutputStream();byte[] b new byte[2048];int size;while ((size inputStream.read(b)) &…

InputStream 、 InputStreamReader和BufferedReader

在Java中,上述三个类经常用于处理数据流,下面介绍一下三个类的不同之处以及各自的用法。 InputStream : 是所有字节输入流的超类,一般使用它的子类:FileInputStream等,它能输出字节流;InputStre…

Java转换流(InputStreamReader/OutputStreamWriter)

文章目录 概述为什么会有转换流?InputStreamReaderOutputStreamWriter 概述 转换流是字节流到字符流的桥梁,在转换的过程中,可以指定编码。转换流也是一种处理流,它提供了字节流和字符流之间的转换。 转换流的两个类 InputStrea…

InputStream read()方法详解

在Java7中,InputStream被定义为一个抽象类,相应的,该类下的read()方法也是一个抽象方法,这也就意味着必须有一个类继承InputStream并且实现这个read方法。   查阅Java7 API,我们可以看到,在InputStream中…

【Java学习笔记】InputStreamReader的理解

一、InputStreamReader类 API文档说明:InputStreamReader类是从字节流到字符流的桥接器:它使用指定的字符集读取字节并将它们解码为字符。 它使用的字符集可以通过名称指定,也可以明确指定,或者可以接受平台的默认字符集。每次调…

InputStreamReader介绍使用

InputStreamReader类: java.io.InputStreamReader extends Reader InputStreamReader:是字节流通向字符流的桥梁:他使用指定的charset读取字节并将其解码为字符。(解码:把看不懂的变为能看懂的) 继承自父类的共性成员方法:int r…

jconsole工具监测jvm

背景 本篇文章为了记录如何使用jconsole工具。 jconsole工具使用环境是windows,监控服务端在linux上。 如何启动jconsole 找到你本地jdk的目录,进入bin目录,找到jconsole.exe程序双击启动即可 本地进程 如果是想调试本地程序的话&#xf…

jconsole远程连接服务器失败,提示“连接失败:是否重试“

操作步骤: 运行程序的时候加上参数: -Djava.rmi.server.hostname****** -Dcom.sun.management.jmxremotetrue -Dcom.sun.management.jmxremote.port9991 -Dcom.sun.management.jmxremote.authenticatefalse -Dcom.sun.management.jmxremote.sslfalse 服务器打开端口:效果就…

java jconsole 远程连接_jconsole连接远程tomcat

咱们先说怎么做,然后再聊聊一些原理,当然,本人技术能力有限,有错误的地方,欢迎指正。 1.本机环境,远程环境 本机环境:windows 7 java version "1.8.0_121" 远程环境:centos 6.5 java…

jconsole远程连接的使用

背景 在项目做性能压测的时候,对程序进行分析,需要用到jconsole工具,以前都没用过,学习了一下 连接步骤 1. 打开工具 打开jdk安装目录 -> bin ,找到jconsole.exe 双击打开 2. 到服务器中,加入以下…

简单使用Jconsole

引言 本文简单介绍Jconsole,死锁用例测试分析线程 正文 测试用例 DeadLockDemo : public class DeadLockDemo {private static Object resource1 new Object();//资源 1private static Object resource2 new Object();//资源 2public static void…

linux jconsole 监控jvm,JVM监测分析JConsole

一、基本操作 启动界面 1.JConsole是什么 从Java 5开始引入了JConsole。JConsole是一个内置Java性能分析器,可以从命令行或在GUI shell中运行。您可以轻松地使用JConsole(或者,它更高端的“近亲” VisualVM)来监控Java应用程序性能和跟踪Java中的代码。 …

Java应用程序监控之 jconsole

jconsole jconsole 启动一个图形控制台,使您可以监视和管理Java应用程序。JConsole图形用户界面是一个符合Java Management Extensions(JMX)规范的监视工具。JConsole使用Java虚拟机(Java VM)的广泛工具来提供有关Jav…

JConsole远程监控配置

首先,看本机(Windows)安装了JRE没 Win 》 CMD 打开命令窗口 如有安装,则会显示以下版本信息;若没有显示,就安装吧 1 C:\Users\Administrator>java -version 2 java version "1.8.0_111" 3 …

jconsole连接失败:是否重试?

背景 在学习使用jconsole的时候,按照大佬们的教程一步一步操作的,到了连接的时候却一直报这个错误,连接不上远程服务,百度了很久也没有相关的说明,都是让添加那些启动参数,问题是启动参数我早就添加了。。…