在使用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="登录"> <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" ,//url 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>
几点区别如下:
1、两种方法的路由都是/users/login,如果后台服务在路由函数的最后return render_template(‘index.html’),那么form表单提交会自动跳转到index页面,而ajax提交页面不会跳转,只是会返回这个页面,从fiddler中抓包可以在webview中看到index页面
2、form中的登录按钮处type=‘submit’,而ajax中的登录按钮处type=‘button’且要加上onclick=‘login()’函数,并在JavaScript代码中完成login()函数的功能
3、form中的请求参数url在<form>的action=' /users/login',请求方法默认为get,如果要设置加上method='post',请求数据会自动提取form体中的所有数据;ajax中的请求参数url,data,method都是在$.ajax方法中设置
4、form提交的请求的contentype为 application/x-www-form-urlencoded,而ajax是自己设置的一般为 application/json,这两种格式的请求方式在后端的数据使用方式请参见博客 application/x-www-form-urlencoded类型如何获取表单数据及ImmutableMultiDict如何使用