先看一个案例：用户点击按钮之后，发送AJAX请求，显示部门列表。
前端代码
<html>
<head>
<meta charset="UTF-8">
<title>ajax dept</title>
</head>
<body>
<script type="text/javascript">
window.onload = function (){
document.getElementById("btn").onclick = function (){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (){
if (this.readyState == 4) {
if (this.status == 200) {
document.getElementById("deptbody").innerHTML = this.responseText
}else {
alert(this.status)
}
}
}
xhr.open("GET","/ajax_dept/ajaxdept",true)
xhr.send()
}
}
</script>
<input type="button" value="显示部门列表" id="btn">
<table width="50%" border="1px">
<tr>
<th>部门编号</th>
<th>部门名称</th>
<th>部门位置</th>
</tr>
<tbody id="deptbody">
<!--到时候输出的是以下形式-->
<!--<tr>
<td>10</td>
<td>销售部</td>
<td>上海</td>
</tr>
<tr>
<td>20</td>
<td>研发部</td>
<td>广州</td>
</tr>-->
</tbody>
</table>
</body>
</html>
后端
@WebServlet("/ajaxdept")
public class AjaxDeptServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
try {
conn = DButil.getConnection();
String sql = "select * from t_dept;";
ps = conn.prepareStatement(sql);
rs = ps.executeQuery();
while (rs.next()){
out.print("<tr>\n" +
" <td>"+rs.getString("deptno")+"</td>\n" +
" <td>"+rs.getString("dname")+"</td>\n" +
" <td>"+rs.getString("loc")+"</td>\n" +
" </tr>");
}
} catch (SQLException e) {
e.printStackTrace();
}finally {
DButil.close(conn,ps,rs);
}
}
}
DButil是JDBC工具类
结果
显然在后端java程序中拼接HTML代码，然后将HTML代码直接响应到浏览器客户端。
后端不应该在java代码中编写HTML代码，会变得不好维护。
这时候可以在后端拼接JSON格式的字符串，或者XML格式的字符串，将这个字符串发送给前端，前端解析即可。
属性值的类型随意，可能为数字、布尔类型、字符串、数组、JSON对象。。。
var json对象名字 = {“属性名1” ：属性值1，“属性名2”：属性值2 …}
例如 var user = {"usercode":111,"username":"zhangsan","aihaos":{"打游戏","喝酒","抽烟"},"sex":true,"addr":{"city":"广州","street":"广州天河区"}}
第一种方式 json对象名字.属性名
user.usercode
如果是JSON对象就继续’.': user.addr.city
如果是数组就进行遍历：for(var i = 0;i<user.aihaos.length;i++)user.aihaos[i]
第二种方式 json对象名字[“属性名”]
与上面差不多
AJAX请求从后端响应回来的是一串字符串，javascript怎么把拼接JSON格式的字符串转换成JSON对象。
例如var jsonStr = "{\"username\" : \"zhangsan\", \"password\" : \"1233344\"}"
它是一串JSON格式的字符串，需要把它转换成JSON对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示JSON</title>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
var jsonStr = "{\"username\" : \"zhangsan\", \"password\" : \"1233344\"}"
//由于json是以”{}”的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。
var eval1 = eval('('+jsonStr+')');
alert(eval1.username)
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示JSON</title>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
var jsonStr = "{\"username\" : \"zhangsan\", \"password\" : \"1233344\"}"
var josnObj = JSON.parse(jsonStr);
alert(josnObj.username)
}
</script>
</body>
</html>
html
<html>
<head>
<meta charset="UTF-8">
<title>ajax dept</title>
</head>
<body>
<script type="text/javascript">
window.onload = function (){
document.getElementById("btn").onclick = function (){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (){
if (this.readyState == 4) {
if (this.status == 200) {
var json = JSON.parse(this.responseText);//是一个数组，并且数组有多个部门数据
var html = ""
for (var i = 0; i < json.length; i++) {
var dept = json[i];
html += "<tr>\n" +
" <td>"+dept.deptno+"</td>\n" +
" <td>"+dept.dname+"</td>\n" +
" <td>"+dept.loc+"</td>\n" +
" </tr>"
}
document.getElementById("deptbody").innerHTML = html
}else {
alert(this.status)
}
}
}
xhr.open("GET","/ajax_dept/ajaxdept",true)
xhr.send()
}
}
</script>
<input type="button" value="显示部门列表" id="btn">
<table width="50%" border="1px">
<tr>
<th>部门编号</th>
<th>部门名称</th>
<th>部门位置</th>
</tr>
<tbody id="deptbody">
<!--到时候输出的是以下形式-->
<!--<tr>
<td>10</td>
<td>销售部</td>
<td>上海</td>
</tr>
<tr>
<td>20</td>
<td>研发部</td>
<td>广州</td>
</tr>-->
</tbody>
</table>
</body>
</html>
后端代码
@WebServlet("/ajaxdept")
public class AjaxDeptServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
StringBuffer json = new StringBuffer();
String jsonstr = "";
try {
conn = DButil.getConnection();
String sql = "select * from t_dept;";
ps = conn.prepareStatement(sql);
rs = ps.executeQuery();
json.append("[");
while (rs.next()){
json.append("{\"deptno\":" + rs.getInt("deptno") + ",");
json.append("\"dname\":\"" + rs.getString("dname") + "\",");
json.append("\"loc\":\"" + rs.getString("loc") + "\"},");
}
jsonstr = json.substring(0, json.length() - 1) + "]";
} catch (SQLException e) {
e.printStackTrace();
}finally {
DButil.close(conn,ps,rs);
}
out.print(jsonstr);
}
}
我们发现在后端的json字符串拼接实在是太痛苦了，因为json只能使用双引号“”，而双引号在字符串里需要进行转义，所以拼接字符串的代码看起来就很另类
可以使用阿里巴巴的fastjson组件，它可以将java对象转换成json格式的字符串
1.把阿里巴巴的fastjson组件导进去
2.创建一个Dept部门类，对外提供set/get方法访问。
3.创建一个List集合存储Dept类
4.把查询到的部门数据存储到java类里面，添加到List集合里
public class Dept {
private Integer deptno;
private String dname;
private String loc;
public Dept() {
}
public Integer getDeptno() {
return this.deptno;
}
public void setDeptno(Integer deptno) {
this.deptno = deptno;
}
public String getDname() {
return dname;
}
public void setDname(String dname) {
this.dname = dname;
}
public String getLoc() {
return loc;
}
public void setLoc(String loc) {
this.loc = loc;
}
}
@WebServlet("/ajaxdept")
public class AjaxDeptServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
//StringBuffer json = new StringBuffer();
String jsonstr = "";
try {
conn = DButil.getConnection();
String sql = "select * from t_dept;";
ps = conn.prepareStatement(sql);
rs = ps.executeQuery();
List<Dept> deptList = new ArrayList<>();
/*json.append("[");*/
while (rs.next()){
/*json.append("{\"deptno\":" + rs.getInt("deptno") + ",");
json.append("\"dname\":\"" + rs.getString("dname") + "\",");
json.append("\"loc\":\"" + rs.getString("loc") + "\"},");*/
Dept dept = new Dept();
dept.setDeptno(rs.getInt("deptno"));
dept.setDname(rs.getString("dname"));
dept.setLoc(rs.getString("loc"));
deptList.add(dept);
}
jsonstr = JSON.toJSONString(deptList);//把Java对象转换成JSON对象
//jsonstr = json.substring(0, json.length() - 1) + "]";
} catch (SQLException e) {
e.printStackTrace();
}finally {
DButil.close(conn,ps,rs);
}
out.print(jsonstr);
}
}
html页面不用修改
