1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 表单提交-form提交和ajax提交

表单提交-form提交和ajax提交

时间:2022-05-03 20:14:28

相关推荐

表单提交-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="登录">&nbsp<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="/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()">&nbsp;<input type="reset" value="重置"></p></form></div></body></html>

参考以下内容:

/q/1010000004461470

/han-1034683568/p/7199168.html

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。