前几天看见很多身边的人在学习ajax的时候出现了一个问题,就是不知道什么时候用action+submit提交数据,什么时候用ajax;还有人有疑问表示,不知道使用Ajax时是否需要使用到form表单的action属性。下面我用一个简单的登录案例为大家介绍一下action和ajax的具体区别是什么。
<form id="login" action="/user/login" method="post"> <input name="username" type="text" id="username"/> <input name="password" type="password" id="password"/> <input type="submit" value="登录"> <input type="reset" value="重置"> </form>
注意:
<body> <form id="login" action="/user/login" method="post"> <input name="username" type="text" id="username"/> <input name="password" type="password" id="password"/> <input type="submit" value="登录" onClick="test()" > <input type="reset" value="重置"> </form> </body> <script> function test(){ var f = document.getElementsByTagName("form")[0]; f.action=f.action+"username="+document.getElementById("username").value; alert(f.action); } </script>
<body> <form id="Userlogin" action="/user/login" method="post"> <input name="userName" type="text" id="UserName"/> <input name="password" type="password" id="password"/> <input type="button" value="登录" onClick="login()"> <input type="reset"value="重置"> </form> </body> <script type="text/javascript"> function login() { $.ajax({ type: "POST",//方法类型 dataType: "json",//服务器返回的数据类型 url: "/user/login" ,//控制器url data: $('#login').serialize(), success: function (result) { console.log(result);//测试是否有数据 if (result.resultCode == 200) {//200正确 alert("成功登陆!"); window.location.href = '跳转路径';//成功后跳转到某界面 } else{ alert(result.msg); } }, error : function() { alert("登录失败!"); } }); } </script>
注意: