本篇博客主要讲解三个问题。
1.什么是ajax
2.从后台如何用json格式向jsp页面传多个不同的对象
3.jsp页面如何向后台发送多个对象
1.ajax
Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
2.从后台到jsp界面传值
2.1咋们通过一个实例来了解。
下面是数据库里的三张表,我需要从库里同时取到2-1、2-2、2-3三张表才能显示出一个完整的线路信息。完整的线路如2-4图所示。
2.1 具体实现
开始是打算写几个嵌套的ajax。先取出线路类型表的数据,再通过线路类型的ID取到相应的线路信息,然后通过线路ID取到全部的图片信息。发现逻辑写完后实现不了。就很疑惑这是为什么。冷静下来发现是因为ajax是异步的,不会按从上到下的执行。也就是说我不能一步一步的取到值。除非取消ajax的异步方式 async:false。 这就太蠢了点了,还会影响我页面的加载速度。
因此我们就需要将三张表的数据一同返回界面再进行解析了。实现思路,将三张表的数据保存为json字符串格式,通过特殊的字符连接在一起。最后返回给界面。
如:数据1+"&"+数据2+"&"+数据3…
(1)servlet将数据转json格式
{
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
String method = request.getParameter("method");//接受查询选择变量
String result = null; //存放结果字符串的变量
if (method.equals("selectLTP")) {
result = selectLineTypeAll()+"&"+selectLineAll()+"&"+selectAllPicture();//拼接json字符串
}
out.print(result);//返回结果
out.flush();
out.close();
}
private String selectLineAll() {//查询所有线路的方法
String result;
LineService lineService = new LineService();
List<Line> list = new ArrayList<Line>();
list = lineService.selectAll(); //通过jdbc连接取到线路list集合
result = JSON.toJSONString(list);//转成json格式
return result;
}
private String selectLineTypeAll() {//查询所有线路类型的方法
String result;
LineTypeService lineTypeService = new LineTypeService();
List<LineType> list = new ArrayList<LineType>();
list = lineTypeService.selectAll();//通过jdbc连接取到线路类型list集合
result = JSON.toJSONString(list);//转成json格式
return result;
}
private String selectAllPicture(){//查询所有图片得方法
String result;
PictureService pictureService = new PictureService();
List<Picture> list = new ArrayList<Picture>();
list = pictureService.selectAllPictures();//通过jdbc连接取到图片list集合
result = JSON.toJSONString(list);//转成json格式
return result;
}
(2)jsp发送请求
$.ajax({//从库中取出线路类型
type:"post",
url:"CommonSelect",
dataType: "text",
data:{
method:"selectLTP" //传查询方法变量。请求查询所有线路、线路类型与所有图片
},
success : function(data){
//通过split方法将返回的结果截取为两个片段
var lineTypeObj = JSON.parse(data.split("&")[0]);//解析成线路类型对象
var lineObj = JSON.parse(data.split("&")[1]);//解析成线路对象
var pictureObj = JSON.parse(data.split("&")[2]);//解析成图片对象
}
});
图2-5就将数据返回到了jsp页面,后面我们就将这些数据拼接到页面即可。
3.从jsp页面向后台传多个对象
3.1 请看下面图3-1
这是一个很常见的表单了。我需要从页面或取到游客的信息,方法有很多,如通过表单form提交给每一个表单name属性、通过ajax提交给表单id属性。但是这个表单是可以一直加的。我可能有1个游客、2个、3个…一个两个我们还可以一个一个的个name,给id取到对应的值。但是多了就不方便了。这里就需要用ajax来传多个对象了。
(1)表单的样式
<!--游客1-->
<div class="youke">
<ul>
<li><span>*</span> 真实姓名 <input name="textfield" type="text"
id="textfield" size="20" /> <a href="#"οnclick="return false;">修改</a></li>
<li><span>*</span> 手机 <input name="textfield" type="text"
id="textfield" size="20" /> <a href="#"οnclick="return false;">修改</a></li>
<li><span>*</span> 身 份 证 <input name="textfield" type="text"
id="textfield" size="20" /> <a href="#"οnclick="return false;">修改</a></li>
<li class="opli"><a href="" onclick="return false;" class="operateDel">-移除该信息栏</a></li>
</ul>
</div>
<!--游客2-->
<div class="youke">
<ul>
<li><span>*</span> 真实姓名 <input name="textfield" type="text"
id="textfield" size="20" /> <a href="#"οnclick="return false;">修改</a></li>
<li><span>*</span> 手机 <input name="textfield" type="text"
id="textfield" size="20" /> <a href="#"οnclick="return false;">修改</a></li>
<li><span>*</span> 身 份 证 <input name="textfield" type="text"
id="textfield" size="20" /> <a href="#"οnclick="return false;">修改</a></li>
<li class="opli"><a href="" onclick="return false;" class="operateDel">-移除该信息栏</a></li>
</ul>
</div>
(2)js ajax请求
<script>
function orBtn() {
var state = false;
$("input[type='text']").each(function(){//遍历页面所有的表单值,为不能提交
if($(this).val()==""){
alert("页面存在空值!");
state = true;
return false;
}
});
if (!state) {//不为空,进行取表单
var arr = new Array();//保存游客对象的数组
var div = $(".youke");//取到所有放input表单的div
for (var int = 0; int < div.length; int++) {//遍历div取表单数据
var input = $(div[int]).find("input");
var tourist = new Object();//创建一个游客对象
tourist.realName = input[0].value;//取游客姓名
tourist.tel = input[1].value;//取游客电话
tourist.IDCard = input[2].value;//取游客身份证
arr[int] = tourist;//将对象保存到arr数组
}
$.ajax({
type : "post",
dataType : "json",
url: "OrderServlet",
data : {
tourist:JSON.stringify(arr),//将对象保存为json格式
},
success : function(data){
alert(data);
alert("下单成功");
},error : function(){
alert("!");
}
});
}
}
</script>
(3)servlet解析页面传来的json字符串
//实体游客
public class Tourist {
private String touristID;//游客id,自动生成
private String iDCard;//游客身份证
private String tel;//游客电话
private String realName;//游客真实姓名
}//实体游客结束
{//servlet部分
response.setCharacterEncoding("utf-8");
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String tourist = request.getParameter("tourist");//取到页面的游客对象字符串
List<Tourist> list = JSONObject.parseArray(tourist, Tourist.class);//将json字符串转换成tourist对象
}
后台取到的结果如3-2所示
4.总结
(1)ajax可以实现我们的局部刷新。节约时间,又减轻服务器压力。
(2)当需要从数据库取到多个表的数据的时候,我们需要将每个表的数据转换成json格式,连接成字符串传到请求页面。
(3)当我们需要从页面得到多组相同的数据时,我们可以将每组保为一个对象,然后用JSON.stringify(数组),变成一个json格式字符串,发送给后台。