我们在请求Servlet时,Servlet会将从数据库中查询到的数据封装成一个List数组,存储在request对象中,然后请求转发到另外一个页面,如以下代码使用request对象携带reportList转发到publication.jsp页面。
//1.将reportList数组存储在request对象中进行返回
request.setAttribute("reportList",reportList);
//2.请求转发到publication.jsp页面
request.getRequestDispatcher("/publication.jsp").forward(request,response);
这样,我们在publication.jsp中,使用EL表达式
${reportList[i].name}//获取第i个对象的name值
${reportList[i].name}//获取第i个对象的age值
就可以获取到reportList中的字段值,并显示在页面中,但是这样每次请求Servlet时都会进行请求转发,刷新整个页面。
那么,我们如何在不刷新整个页面的情况下,获取到Servlet返回的数据,然后进行页面的局部刷新呢?
此时我们需要用到Ajax技术(AJAX=Asynchronous JavaScript and XML),AJAX可以通过后台与服务器进行少量数据交换,使网页进行局部刷新。
1. AJAX的基本用法
/*
@param url:请求的地址
@param funSucc:请求成功执行函数,接受返回的字符串str
@param funFaild:请求失败执行函数,接受返回失败状态码的字符串str2
*/
function ajax(url,funSucc,funFaild) {
var xhr;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();//IE6及其以下不支持
}else{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open('GET',url,true);
xhr.send(null);
xhr.onreadystatechange=function (ev) {
if(xhr.readyState==4){
if(xhr.status==200){
funSucc(xhr.responseText);
}else {
if(funFaild){
funFaild(xhr.status);
}
}
}
}
}
2. 调用ajax获取返回值
ajax('report',function(str){
alert(str);//请求成功弹出返回的字符串str
},function(str2){
alert(str2);//请求失败弹出失败状态码str2
})
3.由于ajax接受的数据为字符串,而Servlet从数据库中查询到的数据为List数组,我们需要在Servlet中将List数据转换为JSONString返回给前端。将List数组转换为JSONString使用com.alibaba.fastjson.JSON这个包,点击下载网站下载,很好用。
Map<String,Object> resMap=new HashMap<>();
resMap.put("reporList",reportList);//将reportList对象存储在resMap中
String resJSON= JSON.toJSONString(resMap);//将resMap中的数据转换为JSONString
response.getWriter().print(resJSON);//将JSONString字符串通过response对象返回
4.resJSON返回到前端后,我们需要对它进行获取。在第2步调用ajax获取返回值时,str接收到的就是resJSON字符串。现在我们改写第2步的代码:
ajax('report',function(str){
//1.str为JOSNString字符串,我们需要先将它转换为JSON对象
var obj=JSON.parse(str);
//2.通过obj就可以获取到reportList数组的对象的属性值
for(var i in obj){
for(var j in obj[i]){
alert(obj[i][j]);//遍历属性值
}
}
},function(str2){
alert(str2);//请求失败弹出失败状态码
})
这样,我们在不刷新整个页面的情况下,就能获取到Servlet通过response返回的数据,对页面进行局部刷新。
温馨提示:在这个过程中,我觉得比较复杂的地方是第4步,如何获取对象的值。这个获取得根据你得到的obj的具体情况,然后再一步一步取出自己想要的属性值。可以先console.log(obj)看看这个对象,然后再遍历,直到取到对象的值。