前几天看见很多身边的人在学习ajax的时候出现了一个问题，就是不知道什么时候用action+submit提交数据，什么时候用ajax；还有人有疑问表示，不知道使用Ajax时是否需要使用到form表单的action属性。下面我用一个简单的登录案例为大家介绍一下action和ajax的具体区别是什么。
1. action
<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>
注意：
- 使用action，input组合提交需要有“name”这个属性，值与实体类对应，然后传至后台。
- 点击提交通过action中的路径/user/login找到对应的控制器，数据传至后台，由后端控制界面跳转。
- action用于整个界面跳转，数据传到后端可以通过控制器跳转到不同的页面，比如上面的代码：登录界面为一个单独的界面，当用户输入信息通过后端代码进行验证时，数据比对成功跳转到成功页面，否则跳转失败页面。
- form表单默认采用get方式请求，可以通过method属性来设置请求方法。
- action提交还可以通过js拼接字符串的方式携带参数，如：
<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>
2. ajax
<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>
注意：
- 在提交按钮上写上事件来触发ajax
- input标签的type属性不能时submit，需要改成button，这样才能实现局部刷新，而不是页面跳转
- action属性必须有，但是值可以为空，为空表示由本页面处理数据