表单提交-form提交和ajax提交
1、使用场景:
安全性都一样,都是发送的http协议。安全性与提交文件的业务处理(格式检测,防注入)有关,与提交方式无关。
一般登录用表单提交,点击提交触发submit事件,一般会 使页面发生跳转,页面的跳转等行为的控制往往在后端,后端控制页面的跳转及数据的传递;但是某些时候不希望页面跳转,或者说想要将控制权放在前端,通过js来操作页面的跳转或数据变化,一般这种异步操作,都会使用ajax。
但是Ajax会有个隐藏的问题,即浏览器不保存密码,不符合用户习惯。理想的方式:建立隐藏的iframe,把form标签的target指向iframe,然后检测iframe的状态。
2、比较:
(1)ajax在提交、请求、接收时,都是异步进行,网页不需要刷新,只刷新页面局部,不关心也不影响页面其他部分的内容。
Form提交则是新建一个页面,哪怕是提交给自己本身的页面,也需要刷新,为了维持页面用户对表单的状态改变,要在控制器和模板之间传递更多参数以保持页面状态。
(2)ajax提交时,是在后台新建一个请求。
Form却是放弃本页面,然后再请求。
(3)ajax必须要用js来实现,存在调试麻烦、浏览器兼容问题,而且不启用js的浏览器,无法完成操作。
Form表单是浏览器自带的,无论是否开启js,都可以提交表单。
(4)ajax在提交、请求、接收时,整个过程都需要使用程序来对其进行数据处理。
Form表单提交,是根据表单结构自动完成,不需要代码干预。用submit提交。
3、其他方面:
关于输入内容的校验,ajax可以在获取到元素内容用程序判断;form表单的属性中有校验的字段,easyui,jeecg等中都封装,用户只需添加正则表达式的校验规则。
4、例:
(1)使用form提交
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>login test</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="form-div"><form id="form1" action="/users/login" method="post"><p>用户名:<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p><p>密 码:<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p><p><input type="submit" value="登录"> <input type="reset" value="重置"></p></form>
</div>
</body>
</html>
(2)使用ajax提交
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>login test</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script type="text/javascript">function login() {$.ajax({type: "POST",dataType: "json",//服务器返回的数据类型contentType: "application/json",//post请求的信息格式url: "/users/login" ,data: $('#form1').serialize(),success: function (result) {console.log(result);//在浏览器中打印服务端返回的数据(调试用)if (result.resultCode == 200) {alert("SUCCESS");};},error : function() {alert("异常!");}});}</script>
</head>
<body>
<div id="form-div"><form id="form1" onsubmit="return false" action="##" method="post"><p>用户名:<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p><p>密 码:<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p><p><input type="button" value="登录" onclick="login()"> <input type="reset" value="重置"></p></form>
</div>
</body>
</html>
参考以下内容:
https://segmentfault.com/q/1010000004461470
https://www.cnblogs.com/han-1034683568/p/7199168.html
表单提交-form提交和ajax提交相关推荐
- 用ajax提交表单给数据库,如何利用ajax提交form表单到数据库
如何利用ajax提交form表单到数据库 发布时间:2021-06-17 14:52:49 来源:亿速云 阅读:75 作者:小新 这篇文章主要介绍如何利用ajax提交form表单到数据库,文中介绍的非 ...
- 将form表单提交文件修改为ajax提交
好久没有记录工作中的出现的问题了,不过最近客户提出了新的需求,正好弥补了一下我的短板,学到了新的知识. 周一接到客户电话,要求完善上周写的某个功能--就是同时上传多个图片,并通过接口程序传到第三方系统 ...
- VIEW层AJAX提交表单到Controller的实体(AJAX传递序列化的输入元素)
在MVC环境中,AJAX方式添加一个对象,这个对象在Models中是一个视图模型,在前台显示时是这样的代码: <%using (Html.BeginForm()) { %> ...
- 前端问题:button按钮在form表单的时候会当成submit提交
button按钮在form表单的时候会当成submit提交 input type="button" PS:遇到了一个坑是,button按钮在form表单的时候会当成submit提交 ...
- 如何让form表单在enter键入时不提交
今天在做我的一个小玩意 在线聊天工具的时候 form表单只有一个text和一个button每当我键入enter的时候就刷新.很是郁闷,直接在form上onsumbit=false.才行. 下面是我查询 ...
- EasyUI加zTree使用解析 easyui修改操作的表单回显方法 验证框提交表单前验证 datagrid的load方法
带参提交一次查询,从服务器加载新数据.这是一个神奇的方法 $('#dg').datagrid('load',{code: '01',name: 'name01' }); easyui修改操作的回显方法 ...
- EasyUI加zTree使用解析 easyui修改操作的表单回显方法 验证框提交表单前验证 datagrid的load方法...
带参提交一次查询,从服务器加载新数据.这是一个神奇的方法 $('#dg').datagrid('load',{code: '01',name: 'name01' }); easyui修改操作的回显方法 ...
- 提交表单时,post方式无法提交(一种情况)
tomcat6,设置文件上传不限制大小maxPostSize="0" 但是在tomcat7及以后版本,应设置为小于0,如maxPostSize="-1" 否则 ...
- 留言提交成功页面html,织梦自定义表单自动获取用户IP、提交时间、留言页面的方法...
织梦的自定义表单功能很好用.下面讲解如何利用织梦自定义表单自动获取用户IP.提交时间.留言页面,并转发邮箱. 第一步,在织梦后台新建自定义表单.并添加字段:uname(姓名).utel(电话).uip ...
- html表单c 后台如何接受,前台提交整个表单数据,后台实体类接收
function su() { var formData=$("#form").serializeObject(); //这个把表单按对象类型序列化 $.ajax({ url: ' ...
最新文章
- linux内存布局及页面映射
- 为什么 Python 会成为程序员害怕的编程语言?
- python怎么做自动化测试仪器经销商_Python自动化测试踩坑记录(企业中如何实施自动化测试)...
- 我的java开发规范
- [MySQL] 查询一段时间记录
- 在 aws emr 上,将 hbase table A 的数据,对 key 做 hash,写到另外一张 table B
- 硬盘的分区误删除的恢复
- requests模块介绍
- 华为交换机学习指南基于端口划分VLAN的四种方案
- CRACK秘籍之爆破
- kafka的分布式爬虫系统
- 能提升自己能力的几个经典项目
- 因特尔Edison第2站--mraa下gpio
- 如何将英文句子分词(拆分单词), 并判断分词是否为英文单词
- android A problem occurred starting process
- ACK Acknowledgement 确认 AES Advanced Encryption Standard 高级加密标准 ATM Asynchronous Transfer Mode异步传输模式
- Android系统功耗优化之CPU - CPU功耗和频率的关系
- 计算机加密防止文件外泄,电脑文档加密系统哪个好?文档加密软件如何防止文件流通使用泄密...
- 深度学习方法(二十一):常用权重初始化方法Xavier,He initialization的推导
- 《重学设计模式》PDF 出炉了 - 小傅哥,肝了50天写出18万字271页的实战编程资料...
热门文章
- 企业工商四要素核验是对哪些信息进行验证?
- STM32WL LoRaWAN节点设备学习记录(一)
- iptables配置SNAT实现共享上网
- 三次技术转型的我在帝都的北漂奋斗史
- SQLServer 查询匹配字符(CHARINDEX)和替换字符
- java中Scanner用法
- ImportError: `load_weights` requires h5py when loading weights from HDF5.错误
- 老男孩python全栈s21day04作业
- Linux Raid相关知识
- Dynamic OCT 和 Dynamic ODT 详细说明