废话就不多说了，我们都知道，前端通常会通过后台提供的接口来获取数据来完成前端页面的渲染。
1.前端通过接口调用后台返回的数据
test pagethis ismy jsp
type:"Get",
url:"servlet/JJJJ",
success: function(data){
$("#json").text(data);
}
})
这是一个jsp页面：
向服务器发起了一个ajax请求，请求的地址是"servlet/JJJJ",请求成功后执行回调函数，这个data就是这个url
返回的数据，一般是一个json格式的字符串，它的根本还是一个字符串。所以前端拿到这个字符串之后，要
将它转化为json(数组)对象，然后访问这个对象的键/值，从而进行页面数据渲染。
2.后台接口(servlet)
//JJJJ.java
public voiddoGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setHeader("contentType", "text/html; charset=utf-8");
PrintWriter out =response.getWriter();
String jsonstr= "[{\"name\": \"eco\", \"age\": \"21\"}]";out.print(jsonstr);
out.flush();
out.close();
}
这是一个servlet，定义了一个json格式的字符串jsonstr，前端对这个servlet发起http请求后，它就返回给前端一
个json字符串。这个手写的json字符串，注意了里面的冒号要用转义字符“\”。
注意：红字固定写法，前面两句是为了防止输出的json字符串中文乱码。
3.后台servlet内数据转换
前后端数据交互一般数据有两个格式：json、xml；大多数情况下还是json。
所以后台获取的数据最终都要以json字符串的形式响应给前台。而后台从数据库获取数据，一般会以java对象或
者java对象列表的形式返回。下面就是这之间的转换操作。
//java对象转化为json字符串
User user= new User("eco", "567568"); //java对象
JSONObject json = JSONObject.fromObject(user); //转为json对象
String jsonstr = json.toString(); //转为json字符串
//java对象列表转化为json字符串
User user1= new User("eco", "567568");
User user2= new User("桔子桑", "123123");
List list= new ArrayList(); //数组列表，并添加两个user对象
list.add(user1);
list.add(user2);
JSONArray array= JSONArray.fromObject(list); //java对象列表转化为json对象数组
String jsonstr = array.toString(); //json对象数组转化为json字符串
4.前端数据转换
前端通过后台提供的接口获得了json字符串，接下来就是将其转化为json对象(列表)，然后再对其属性进行操作。
//json字符串转化为json对象
var a = JSON.parse( data ); //浏览器支持的方式
var b = $.parseJSON( data ); //jQuery支持的方式
上面是两种将json字符串转化为json对象的方式，jQuery方式需要事先导入jQuery框架。
下面是json对象的数据访问方式。
a.username; //a是一个json对象，返回对象的username属性值
a[1].username; //a是一个json对象数组，返回第二个对象的username属性值
5.前端发起含参数的ajax请求
type:"Get",
url:"servlet/JJJJ",
data:{username:"eco",password:"23423"},
success: function(data){var a =JSON.parse(data);
$("#json").text(a.username);
}
})
前端向服务器发出ajax请求，并且在request中提供参数，这里有两个data，
第一个红色data是前端发起请求时附带的参数，
第二个金色data是后台返回的数据(json字符串)。
public voiddoGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setHeader("contentType", "text/html; charset=utf-8");
PrintWriterout =response.getWriter();
String username= request.getParameter("username");
String password = request.getParameter("password");
User user = new User(username, password);
JSONObject json = JSONObject.fromObject(user);
String jsonstr = json.toString();out.print(jsonstr);out.flush();out.close();
}
后台的这个servlet收到前端的请求后，先获取request里面的Parameter，然后将属性值赋给User对象，
java对象---->json对象---->json字符串，最后将json字符串返回给前端。
后面的就不用我说了。
更多的时候，我们并不是像上面写的那样，通常我们会将前台request传来的参数作为数据库查询的条件，
将查询结果(java对象列表)经过处理(转为json字符串)返回给前端，再由前端渲染页面。
6.get/post请求的字符编码问题
前端对服务器发起请求request、后台做出响应response都会存在编码不一致导致字符乱码的问题
通常我们会在servlet的doGet()、doPost()方法开始添加一下语句：
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
但是，这种方法只对前台发出的Post请求有效，对于Get请求是不起作用的。
个人推荐以下方式，一劳永逸：
< Connector port="8080"protocol="HTTP/1.1"connectionTimeout="20000"redirectPort="8443"URIEncoding="UTF-8"
useBodyEncodingForURI="true" />
红字是新加的字段，更改文件后要重启Tomcat才能生效(注意：不是Myeclipse里面的服务器重启按钮)。
7.数据库查询的返回值问题
先来看一个doGet()方法：
public voiddoGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
PrintWriterout =response.getWriter();
String username= request.getParameter("username");
String sex= request.getParameter("sex");
session=HibernateSessionFactory.getSession();
transaction=session.beginTransaction();
String hql= "select sname,sex from Student where sex = ?";
Query query = session.createQuery(hql);
query.setString(0, sex);
List list = query.list();
Object[] a = list.toArray();
User user = new User("桔子桑", "男");
User user1 = new User("eco", "男");
User user2 = new User("官方", "男");
List b = newArrayList();
b.add(user);
b.add(user1);
b.add(user2);
System.out.println("list类型：" + list.getClass().getName() +
"a类型："+ a.getClass().getName() +
"b类型："+b.getClass().getName());
JSONArray array= JSONArray.fromObject(a);
String jsonstr = array.toString();
out.print(jsonstr);out.flush();out.close();
transaction.commit();
session.close();
}
注意看红字和紫字：
依次将三种形式的数据转为json字符串输出到前台：
list--ArrayList：[["桔子桑","男"],["eco","男"],["官方","男"]]
a-------Object：[["桔子桑","男"],["eco","男"],["官方","男"]]
b----ArrayList：[{"password":"男","username":"桔子桑"},{"password":"男","username":"eco"},{"password":"男","username":"官方"}]
再将他们转为json对象后，获得数据方式自然为以下(var obj = JSON.parse(data))：
list、a：obj[0][0]--------------"桔子桑"；
b ：obj[0].username---"桔子桑"；
其余数据类推，得出结论：数据库查询返回的是类二维数组形式，实际上是Object[]的集合。
8.数据库查询返回值转化
通常情况下，当然不可能让前端按照obj[1][0]的方式去使用数据，那样的话不利于代码维护，所以我们就
有必要将数据库查询的返回值由Object[]的集合转化为javaBean对象的集合。
综合网上的前人的经验，现针对几种查询贴出方法：
①from Student
即查询全部字段
String hql = "from Student";
Query query=session.createQuery(hql);
List listDB = query.list();
List listOut = new ArrayList();for(Student str : listDB) {
String sname=str.getSname();
String sex=str.getSex();
Integer sid=str.getSid();
Students stu= newStudents(sid, sname, sex);
listOut.add(stu);
}
查询全部字段，查询结果的泛型自然为Student，可以通过getter方法获得个字段属性值，
然后传给新建对象，进而添加到集合listOut，响应出去。
②select sname,sex from Student
即：查询部分字段
String hql = "select sname,sex from Student";
Query query=session.createQuery(hql);
List listDB = query.list();
List listOut = new ArrayList();for(Object[] object : listDB) {
String sname= (String) object[0];Student stu= newStudent(sname);
listOut.add(stu);
}
遍历查询结果的每一项，由于该项是一个Object[]，获得数组每项的数据传递给javaBean对象的构造器参数，
然后将这个对象添加到自定义泛型的集合listOut中，再处理成json字符串响应给前端。
这里要注意两个集合的泛型！！！
③select sname from Student
即：查询单个字段
String hql = "select sname from Student";
Query query=session.createQuery(hql);
List listDB = query.list();
List listOut = new ArrayList();for(String str : listDB) {
String sname=str;
Student stu= newStudent(sname);
listOut.add(stu);
}
总而言之，数据库查询默认以Object[]的集合形式返回，根据查询的条目不同，
就可以用泛型来改变它的返回类型，然后拿出各项的数据通过构造函数来新建对象并添加到
自定义javaBean泛型的集合中去，最终转化为json字符串响应出去。
数据库查询返回值：[{"vaule1","vaule2","vaule3"},{"vaule4","vaule5","vaule6"}]；
每个对象表示一条记录，vaule表示每个查询字段对应的数据值
经过转化后：[{"attr1":"vaule1","attr2":"vaule2","attr3":"vaule3"},{"attr1":"vaule4","attr2":"vaule5","attr3":"vaule6"}]
这样，输出到前台后就可以通过属性attr来获取对应的值了。
9.Js实现前端数据渲染
前端拿到javaBean对象集合形式的json字符串后，接下来就是将数据渲染到html标签了。
js感觉没什么好讲得，直接上代码：
this is my jsp
type:"get",
url:"servlet/JJJJ",
data:{username:"eco",sex:"男"},
success:fill
});
function fill(data){
$("#list").html('');
var json = $.parseJSON( data );
$.each(json, function (index, item) {
var name = json[index].sname;
var idnumber = json[index].sid;
$("#list").html($("#list").html() + "
"+name + " - " + idnumber + ""+"");
});
};
ajax请求成功的回调函数实现了，将数据填充到空的ul标签内。
通常情况下都是采用模板引擎，后台直接向前台输出html代码的json字符串，
然后前台直接写一个空的div，js代码也是大大简化：$("#div").html(data),
如此一来，大大简化了前端工作量，经过渲染后展现给用户的html结构就改变了：
------------------------------------------------------------------------------------