Ajax作为前后端交互的桥梁,一直是非常重要的,下面我来说一下Ajax的用法以及步骤。
一、导入jQuery的JS文件
在没有jQuery时,我们配置ajax是非常繁琐的,需要配置XMLHttpRequest对象,并且还要根据浏览器的差异,区分IE和非IE,有了jQuery之后,我们只需要下面一行代码即可调用
$.ajax({
})
下面演示从表单中获取元素的内容,并且提交到后台
//form表单
<form>
<input type="text" id="name"/>
<input type="password" id="password"/>
<input type="button" value="提交" id="submit"/>
</form>
<script>
$('#submit').onclick() = function(){
var name = $('#name").val();
var password = $('#password").val();
data = {
name : name,
password : password
}
$.ajax({
url : "xxxx",
data : data;
type : "post",
//这里注意,dataType意味服务器返回数据需要以指定格式返回
//dataType : "json",
success : function(data){
//请求成功后返回
//data是服务器返回的数据,是json格式
},
error : function(err){
//请求失败时执行
};
})
}
</script>
后台接收数据
//接收参数
String name = request.getParameter("name");
String password = request.getParameter("password");
...
PrintWrite out = response.getWrite();
out.print(...);
//用out输出的信息会被返回给ajax,这里需要记住,如果之前的ajax指定dataType为json,这里就需要将返回的信息转换为json格式,否则会进入error回调函数.
ps: jQuery对ajax的支持是非常强大以及便捷的,但是如果想更深层次的理解ajax,则需要去看Ajax的源码,了解XMLHttpRequest对象的运转方法.