使用ajax方法实现form表单的提交

2019独角兽企业重金招聘Python工程师标准>>>

在使用form表单的时候,一旦点击提交触发submit事件，一般会使得页面跳转，页面间的跳转等行为的控制权往往在后端，后端会控制页面的跳转及数据传递，但是在某些时候不希望页面跳转，或者说想要将控制权放在前端，通过js来操作页面的跳转或者数据变化。

一般这种异步的操作，我们都会想到ajax方式，因此在实现了功能后就整理了这篇文章，通过ajax方法实现form表单的提交并进行后续的异步操作。

常见的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"><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="login test">
</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>

点击登录按钮后，即触发form表单的提交事件，数据传输至后端，由后端控制页面跳转和数据。

ajax实现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"><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="ajax方式"><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",//预期服务器返回的数据类型url: "/users/login" ,//urldata: $('#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>

注意事项

在常用方式中，点击的登录按钮的type为"submit"类型；
在常用方式中，form的action不为空；
ajax方式中需要注意的是$.ajax方法中的参数：dataType和data。

转载于:https://my.oschina.net/u/3787897/blog/1635493

使用ajax方法实现form表单的提交相关推荐

前后端交互之使用ajax方法实现form表单的提交
转载于:使用ajax方法实现form表单的提交 - 程序员十三 - 博客园 (cnblogs.com) οnsubmit="reutrn false":表示禁止表单提交. dat ...
使用ajax方法实现form表单的提交（Ajax和from提交的区别）
写在前面的话在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说 ...
php ajax form表单提交,Ajax方法实现Form表单提交的方法
这次给大家带来Ajax方法实现Form表单提交的方法,Ajax方法实现Form表单提交的注意事项有哪些,下面就是实战案例,一起来看一下. 写在前面的话在使用form表单的时候,一旦点击提交触发sub ...
用js将form表单同时提交到两个不同页面的方法
用js将form表单同时提交到两个不同页面的方法: <script type="text/javascript"> function dosubmit(){ windo ...
html表单通过js提交表单提交,JavaScript动态创建form表单并提交的实现方法
本文实例讲述了JavaScript动态创建form表单并提交的实现方法.分享给大家供大家参考,具体如下: 页面布局有些复杂的情况下,可能需要在页面中动态创建一个 form,JavaScript 创建 ...
ajax和form表单的提交跳转问题
ajax和form表单的提交跳转问题使用ajax提交form表单数据的时候,把提交按钮的type="submit"改成type="button",防止点击提交 ...
form表单同时提交带文本和图片的数据
方法一:使用ajax异步提交此种方法的好处是可以回调响应结果. html代码: <form action="${basePath}/save" method="p ...
js实现Form表单submit提交截获数据（各浏览器通用）
js实现Form表单submit提交截获数据(各浏览器通用) js实现Form表单submit提交截获数据(各浏览器通用) No Comments | js , 安全 , PHP | by calms ...
form表单重复提交
现象: 后台完成数据库操作后返回到页面,这时点击浏览器的后退再提交或刷新页面,会导致form表单重复提交原因: 第一次提交的表单会被缓存到内存中,直到页面下次提交或页面关闭或转向其它页面才消失,在自 ...

使用ajax方法实现form表单的提交

常见的form表单提交方式

ajax实现form提交方式

注意事项

使用ajax方法实现form表单的提交相关推荐

最新文章

热门文章