- 基本介绍
在做web开发时需要从前端向后台提交数据,常见的方式有Form表单提交和ajax提交两种,基本写法如下:
form提交:
<div id="form-div">
<form id="form1" action="/user/login" method="post">
<p><span>用户名:</span><input name="userName" type="text" id="txtUserName" tabindex="1" /></p>
<p><span>密 码:</span><input name="password" type="password" id="TextBox2" tabindex="2" /></p>
<p><input type="submit" value="登录"></p>
</form>
</div>
form提交时需要用submit按钮,访问action指向的方法或接口
ajax提交:
<body>
<div>
<form id="form2">
<p>用户名:<input name="userName" type="text" id="txtUserName" tabindex="1" /></p>
<p>密 码:<input name="password" type="password" id="TextBox2" tabindex="2" /></p>
<p><input type="button" value="登录" onclick="login()"></p>
</form>
</div>
<script>
function login() {
$.ajax({
type: "POST",
dataType: "json",
url: "/user/login" ,
data: $('#form2').serialize(),
success: function (result) {
//deal with result
},
error : function() {
//error
}
});
}
</script>
</body>
ajax提交的触发方式可以是任意的,调用包含ajax的函数即可
- 区别
除了写法上的不同外,这两种提交方式的区别主要在于页面刷新方式,form提交会放弃当前页面,向后端发送请求,然后根据返回的结果创建一个新的页面,即使提交后显示的是与之前一样的页面,也需要重新加载;而ajax只进行局部数据刷新,无需更新整个页面。
ajax几个常用的属性及方法:
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
url | String | 访问的url | |
data | String | 发送到服务器的数据 | |
async | Boolean | true | 异步请求 |
type | String | get | 请求方式:get,post,put,delete |
cache | Boolean | true | 缓存 |
content | Object | 相关回调函数的上下文 | |
dataType | String | 返回数据的类型:xml,html,script,json,jsonp,text | |
— | — | — | — |
beforeSend | function | 发送请求之前调用 | |
error | function | 在请求出错时调用 | |
success | function | 在请求之后调用 | |
complete | function | 无论请求成功或失败都会调用 |