前台jsp页面:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'jqueryajax.jsp' starting page</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function kk(){
//得到ajax获取到的数据,返回一个object
var htmlobj=$.ajax({url:"servlet/JsonServlet",async:false});
//将 ajax object 转换为json object,第二种转换
// htmlobj = jQuery.parseJSON(htmlobj.responseText);
htmlobj = eval(htmlobj.responseText);
//清空class 为 sj 的标签内容
$(".sj").empty();
var html = '<table border="1"><tr><td>ID</td><td>用户名</td><td>密码</td></tr>';
//循环获取数据并且拼接成html
$.each(htmlobj,function(entryIndex,entry){
html += '<tr><td>'+entry['id']+'</td><td>'
+entry['username']+'</td><td>'
+entry['password']+'</td></tr>';
});
html += '</table>';
//附加内容到class 为 sj的标签
$(".sj").append(html);
}
</script>
</head>
<body>
<div>
Jquery 动态获取数据 ，演示..
</div>
<div class="sj">
</div>
<input type="button" onclick="kk()" value="点击" />
</body>
</html>
后台一个Servlet 负责从mysql中获取数据并且将其处理成JSONArray
package com.action;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
public class JsonServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
Toto toto = new Toto();
toto.selectAllUsers();
JSONArray json = JSONArray.fromObject(toto.getUsers());
response.setCharacterEncoding("utf-8");
PrintWriter pw = response.getWriter();
pw.print(json);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
运行后的效果:
附加 ：对于jquery异步获取数据还可以写成这样，如下：(推荐用这种写法，个人觉得比较标准)
$.getJSON("servlet/JsonServlet",function(htmlobj){
$(".sj").empty();
var html = '<table>';
$.each(htmlobj,function(entryIndex,entry){
html += '<tr><td>'+entry['id']+'</td></tr>';
});
html += '</table>';
$(".sj").append(html);
});
}
还可以这样写:
$.ajax({
url:'servlet/JsonServlet',
type:'post',
success:function(msg){
var htmlobj = jQuery.parseJSON(msg);
var html = '<table>';
$.each(htmlobj,function(entryIndex,entry){
html += '<tr><td>'+entry['id']+'</td></tr>';
});
html += '</table>';
$(".sj").html(html);
}
});