1.使用ajax和数据库进行连接(后台传入前台)
//jsp中的文件
function queryall(){
var t1=document.getElementById('t1');
var xhr=new XMLHttpRequest();
xhr.open('get','queryall.do',true);
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var strjson=xhr.responseText;
var userlist=JSON.parse(strjson);
for(u of userlist){
var tr=document.createElement('tr');
tr.innerHTML='<td>'+u.id+'</td>'+'<td>'+u.uname+'</td>'+'<td>'+u.mail+'</td>'+'<td>'+u.pow+'</td>';
t1.appendChild(tr);
}
}
}
}
</script>
</head>
<body>
<p>${sessionScope.uid}你好,欢迎登录</p>
<p><input type='button' value='查询' onclick='query()' /></p>
<p id='p1'></p>
<p><input type='button' value='列出全部用户' onclick='queryall()' /></p>
<div>
<table id='t1'>
</table>
</div>
//servlet文件
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//调用服务层
Service sc=new ServiceImp();
// 服务层调用DAO层从数据库里得用户数据结果集,并包装成用户集合
List<User> ulist=sc.find();
// 通过Gson把集合转换为JSON字符串
Gson g=new Gson();
String uliststr=g.toJson(ulist);
// 把JSON字符串以响应输出形式传递给前台
response.setCharacterEncoding("utf-8");
PrintWriter pw=response.getWriter();
pw.print(uliststr);
pw.close();
}
2.使用map取键的形式 查找数据
//jsp中的代码
function map(){
var t1=document.getElementById('t1');
var xhr=new XMLHttpRequest();
xhr.open('get','map.do',true);
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var strjson=xhr.responseText;
var usermap=JSON.parse(strjson);
for(en in usermap){
var key=en;
var u=usermap[en];
var tr=document.createElement('tr');
tr.innerHTML='<td>'+u.id+'</td>'+'<td>'+u.uname+'</td>'+'<td>'+u.mail+'</td>'+'<td>'+u.pow+'</td>';
t1.appendChild(tr);
}
}
}
}
//servlet中的代码
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
Map<Integer,User> map=new HashMap<Integer,User>();
User u1=new User(10,"rong","rong","rong@neusoft.com",0);
User u2=new User(10,"zhang","zhang","zhang@neusoft.com",0);
map.put(1001, u1);
map.put(1002, u2);
Gson g=new Gson();
String strjson=g.toJson(map);
PrintWriter pw=response.getWriter();
pw.print(strjson);
pw.close();
3.前端传入后端代码示例
在这里插入代码片