form表单提交数据的两种方式——submit直接提交、AJAX提交
submit提交
form表单本身提供action属性,在action属性中填写数据提交地址后,点击submit类型的按钮即可将数据提交至指定地址,代码如下:
<form action="127.0.0.1:3001/register" method="post" ><input type="text" placeholder="昵称" name="username"></input><input type="email" placeholder="邮箱" name="email"></input><input type="password" placeholder="密码" name="pwd"></input><input type="submit">注册</input>
</form>
注意:
method指定请求方式
每个input表单项需要有name属性
通过上述方式提交表单数据后,会发生页面跳转,跳转至action所指定的地址,很难满足开发需求。若要提交数据后不跳转,可以尝试通过ajax提交数据。
AJAX提交
form表单不填写action属性,并且在提交时阻止表单的默认行为,获取到表单数据后通过ajax的方式发送给后端,代码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form id="form" method="post" ><input type="text" placeholder="昵称" name="username"></input><input type="email" placeholder="邮箱" name="email"></input><input type="password" placeholder="密码" name="pwd"></input><button id="btn" type="submit">注册</button></form>
</body>
<script>document.getElementById('btn').onclick=function(e){e.preventDefault()let form = document.getElementById("form");form.addEventListener("submit", function (event) {let XHR = new XMLHttpRequest();// 将表单数据转为Formdat格式let FD = new FormData(form);XHR.open("POST", "http://127.0.0.1:3001/register");// XHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded")XHR.send(FD)XHR.onreadystatechange=function(){// do something according to response}})}
</script>
</html>
form表单提交数据的两种方式——submit直接提交、AJAX提交相关推荐
- 向服务器端提交数据的两种方式
朴素版: ...
- Form表单method属性的两种提交方式Get和Post的区别
Mothod属性是控制表单的提交方式的. 表单提交方式有两种:post方式的提交,get方式提交(默认的方式). 两者的区别: 1.get方式的提交,表单元素对应的值会以?key=value& ...
- element组件table表格/form表单显示弹窗的三种方式
element组件table表格显示弹窗的两种方式 <el-table-columnlabel="地址"prop="Address"min-width=& ...
- form表单、控制器中接收表单提交数据的4种方式
Form表单 这篇文章主要讲的是form表单的提交 之前我们接触过的form表单元素是在Bootstrap框架里面,这次也将用到Bootstrap框架去布局(见图表1)通过Bootstrap框架布局呈 ...
- MySQL 清空表数据的两种方式和区别
在MySQL中删除数据有两种方式:truncate table 表名.delete from 表名. 它们在以下方面存在区别: 执行效率 truncate不扫描表,相当于重新创建了表,只保留了表的结构 ...
- Spark读取Hive数据的两种方式与保存数据到HDFS
Spark读取Hive数据的两种方式与保存数据到HDFS Spark读取Hive数据的方式主要有两种 1. 通过访问hive metastore的方式,这种方式通过访问hive的metastore元数 ...
- Servlet获取Excel中数据的两种方式
Servlet解析Excel文件的两种方式 简单分享一下Servlet通过解析Excel文件得到其中数据的两种方式 第一种:前端获取 思路:通过layui的第三方插件 layui.excel 解析ex ...
- html中获取modelandview中的json数据_从Bitmap中获取YUV数据的两种方式
从Bitmap中我们能获取到的是RGB颜色分量,当需要获取YUV数据的时候,则需要先提取R,G,B分量的值,然后将RGB转化为YUV(根据具体的YUV的排列格式做相应的Y,U,V分量的排列) 所以这篇 ...
- ajax加载vue数据,详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
整理文档,搜刮出一个使用vue.js结合jquery ajax加载数据的两种方式的代码,稍微整理精简一下做下分享. 废话不多说,直接上代码 html代码 demo {{message }} 测试jqu ...
最新文章
- 4 在vCenter Server安装View Composer组件
- python生成yaml文件_Python实践34-读写yaml文件
- mysql导出表结构_mysql导入导出表结构及表数据及执行sql文件
- centos8 装docker 问题
- 利用python进行数据分析—七、绘图与可视化—matplotlib与seaborn
- Swift-理解值类型
- AMD and CMD are dead之KMDjs内核之依赖分析
- SQL笔面试题:如何求取中位数?
- 解决问题:PostgreSQL类型为 json, 但表达式的类型为 character varying
- larval框架数据表的填充
- 奇门遁甲排盘方:定局
- DUL[2020-CVPR]
- 思维模型 六顶思考帽
- 系统未激活会影响到远程桌面连接和上网,是真的
- Python函数绘图
- 轻松快捷的安装Testlink,终于可以轻松搞定!
- Proxy和Reflect详解
- 【​观察】赋能中国数字化转型 荣之联的聚焦与穿透
- html怎么制作一个歌单,如何制作属于自己的个性歌单 | Listen1
- Kubectl-AI: 一款使用 OpenAI GPT 自动生成应用 Kubernetes 部署清单的神器