ajax用于异步更新页面的局部内容。
ajax常用的请求数据类型
使用ajax获取text示例
此种方式常用于前端向后台查询实体的一个属性（字段），比如查询总分。
前端页面
<body>
<form>
学号：<input type="text" id="no"><br />
姓名：<input type="text" id="name"><br />
<button type="button" id="btn">查询成绩</button>
</form>
<p id="score"></p>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("#btn").click(function () {
$.ajax({
url:"servlet/handlerservlet", //请求地址
type:"get", //请求方法
data:{"no":$("#no").val(),"name":$("#name").val()}, //要发送的数据,相当于表单提交的数据，json形式。
datatype:"text", //期待返回的数据类型，也可以理解为请求的数据类型
error:function () { //发生错误时的处理
},
success:function (data) { //成功时的处理。参数表示返回的数据
$("#score").text(data);
}
})
});
</script>
</body>
这里使用了jq提供的ajax方法，所以要用<script>将jq的库文件包含进来。
json的key只能是字符串，标准写法要引，实际上不引也可以，会自动转换为字符串。
json的value可以是多种数据类型，如果是字符串，需要引起来。
后台
@webservlet("/servlet/handlerservlet")
public class handlerservlet extends httpservlet {
protected void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
doget(request,response);
}
protected void doget(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
request.setcharacterencoding("utf-8");
response.setcontenttype("text/html;charset=utf-8");
//获取ajax传递的参数，和获取表单数据的方式一样
string no=request.getparameter("no");
string name=request.getparameter("name");
//此处省略连接数据库查询，直接返回成绩
printwriter writer = response.getwriter();
writer.write(name+"同学，你的总分是：600");
}
}
说明
- ajax请求的的url要和servlet配置的urlpatterns对应，这个地方很容易出错
- servlet返回响应时，不管write()多少次，都只组成一个响应返回。
printwriter writer = response.getwriter();
writer.write("中国");
writer.write("北京");
printwriter writer = response.getwriter();
writer.write("中国北京");
这2种方式完全等效，浏览器接受到的都是“中国北京”，“中国”“北京”之间没有空格。
使用ajax获取json对象示例
此种方式常用于后台向前端传送一个实体|javabean（一个实体的多个字段），比如查询一个学生的信息。
前端
<body>
<form>
学号：<input type="text" id="no"><br />
<button type="button" id="btn">查询学生信息</button>
</form>
<p id="show"></p>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("#btn").click(function () {
$.ajax({
url:"servlet/handlerservlet",
type:"post",
data:{},
datatype:"json",
error:function () {
console.log("ajax请求数据失败！");
},
success: function (data) {
//浏览器把接受到的json数据作为js对象，可通过.调用属性
var info = "姓名：" + data.name + ",年龄：" + data.age + "，成绩：" + data.score;
$("#show").text(info);
console.log(data);
}
})
});
</script>
</body>
后台
@webservlet("/servlet/handlerservlet")
public class handlerservlet extends httpservlet {
protected void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
doget(request,response);
}
protected void doget(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
request.setcharacterencoding("utf-8");
response.setcontenttype("text/html;charset=utf-8");
//获取ajax传递的参数，和获取表单数据的方式一样
string no=request.getparameter("no");
//现在很多持久层框架都是把数据库返回的记录转化为javabean处理
//此处省略连接数据库查询，得到student类实例
student student = new student(1, "张三", 20, 100);
//使用fastjson将java对象转换为json字符串
string jsonstr = json.tojsonstring(student);
printwriter writer = response.getwriter();
writer.write(jsonstr);
}
}
说明：json.tojsonstring()使用的是阿里的fastjson.jar，需要自己下载添加这个jar。
使用ajax获取json数组
此种方式用于后台向前端返回同一实体类的多个实例，比如查询总分大于600的学生的信息，可能有多条记录满足要求。
前端
<body>
<button type="button" id="btn">查询学前三个学生的信息</button>
<div id="show"></div>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("#btn").click(function () {
$.ajax({
url:"servlet/handlerservlet",
type:"post",
data:{},
datatype:"json",
error:function () {
console.log("ajax请求数据失败！");
},
success: function (data) {
console.log(data);
//遍历json数组
for (var i=0;i<data.length;i++){
//从json数组得到json对象
var student = data[i];
var info = "姓名：" + student.name + ",年龄：" + student.age + "，成绩：" + student.score;
$("#show").append("<p>" + info + "</p>");
}
}
})
});
</script>
</body>
使用 data[下标].字段名 的方式获取属性值。
后台
@webservlet("/servlet/handlerservlet")
public class handlerservlet extends httpservlet {
protected void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
doget(request,response);
}
protected void doget(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
request.setcharacterencoding("utf-8");
response.setcontenttype("text/html;charset=utf-8");
//获取ajax传递的参数，和获取表单数据的方式一样
string no=request.getparameter("no");
//现在很多持久层框架都是把数据库返回的记录转化为javabean处理
//此处省略连接数据库查询，得到student类的多个实例
student student1 = new student(1, "张三", 20, 100);
student student2 = new student(2, "李四", 19, 80);
student student3 = new student(3, "王五", 20, 90);
arraylist<student> list = new arraylist<>();
list.add(student1);
list.add(student2);
list.add(student3);
//使用fastjson将java对象转换为json字符串
string jsonstr = json.tojsonstring(list);
printwriter writer = response.getwriter();
writer.write(jsonstr);
}
}
使用ajax获取map类型的json数据
使用场景：前端向后台查询多个信息，这些信息不是同一实体类的实例。比如要查询考生人数、最高分考生的信息，考生人数是int型，最高分考生信息是student类的实例。
前端
<body>
<button type="button" id="btn">查询考生人数、最高分考生信息</button>
<div id="show"></div>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("#btn").click(function () {
$.ajax({
url:"servlet/handlerservlet",
type:"post",
data:{},
datatype:"json",
error:function () {
console.log("ajax请求数据失败！");
},
success: function (data) {
console.log(data);
$("#show").append("<p>考生人数："+data.amount+"</p>");
var student = data.student;
var info = "姓名：" + student.name + "，年龄：" + student.age + "，成绩：" + student.score;
$("#show").append("<p>最高分考生信息：" + info + "</p>");
}
})
});
</script>
</body>
以 data.key 的方式获取对应的value。
后台
@webservlet("/servlet/handlerservlet")
public class handlerservlet extends httpservlet {
protected void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
doget(request,response);
}
protected void doget(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
request.setcharacterencoding("utf-8");
response.setcontenttype("text/html;charset=utf-8");
//获取ajax传递的参数，和获取表单数据的方式一样
string no=request.getparameter("no");
//现在很多后台框架都是把数据库返回的记录转化为javabean处理
//此处省略连接数据库查询，得到student类实例
hashmap<string, object> map = new hashmap<>();
map.put("amount", 3000);
map.put("student", new student(1, "张三", 20, 680));
//使用fastjson将java对象转换为json字符串
string jsonstr = json.tojsonstring(map);
printwriter writer = response.getwriter();
writer.write(jsonstr);
}
}
map和json对象十分相似：都是以键值对的形式保存数据，key是string，value是object。
所以后台map类型的数据可以以json的形式传给前端。
说明
- 前端使用了jq的ajax()方法，所以需要把jq的库文件包含进来
- 后台向前端传json数据时，使用了阿里巴巴的fastjson库，需要自己下载引入fastjson.jar
- ajax还有一个常用选项 async：boolean，是否异步请求数据，默认为true 异步请求
async：true 异步，ajax向后台请求数据时，用户仍可以在页面上进行操作
async：false 同步，ajax向后台请求数据，浏览器锁定页面，用户不能在页面上进行操作，直到请求完成