使用easyui dialog先下载jQuery easyui 的压缩包 下载地址http://www.jeasyui.com/download/v155.php
解压后放在项目WebContent目录下
创建jsp文件引入easyui js和css文件
<script type="text/javascript" src="jquery-easyui-1.5/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5/themes/icon.css
创建一个详情链接弹出dialog页面
<a href="javascript:detail(<%=s.getId() %>)" onclick="$('#detail').dialog('open')">详情</a>
onclick="$('#detail').dialog('open')" 弹出id=detail的div盒子
<div id="detail" class="easyui-dialog" title="详情页面" >
<table border="1 solid" cellspacing="0" style="width:400px;height:200px;text-alig:center">
<tr>
<td><label>ID:</label></td><td id="ids"></td>
</tr>
<tr>
<td><label>姓名:</label></td><td id="names"></td>
</tr>
<tr>
<td><label>年龄:</label></td><td id="ages"></td>
</tr>
<tr>
<td><label>性别:</label></td><td id="sexs"></td>
</tr>
<tr>
<td><label>电话:</label></td><td id="tel"></td>
</tr>
<tr>
<td><label>住址:</label></td><td id="address"></td>
</tr>
<tr>
<td><label>密码:</label></td><td id="passds"></td>
</tr>
</table>
</div>
js文件设置弹出框的属性
$(function(){
$("#detail").dialog({
width:600,
height:400,
modal:true,
closed:true,
buttons:[
{
text:"确定",
iconCls:'icon-ok',
handler:function(){
$("#detail").dialog("close")
}
},
{
text:"取消",
iconCls:'icon-ok',
handler:function(){
$("#detail").dialog("close")
}
}
]
})
});
javascript:detail(<%=s.getId() %>)调用js函数请求 Servlet返回详情页数据
function detail(_id){
debugger;
$.ajax({
type:"POST",
url:"findByIdServlet",
//dataType:"json",
data:{id:_id},
success:function(data){
var objs = eval("("+data+")");
document.getElementById("ids").innerHTML=objs.id;
document.getElementById("names").innerHTML=objs.name;
document.getElementById("ages").innerHTML=objs.age;
document.getElementById("sexs").innerHTML=objs.sex;
document.getElementById("tel").innerHTML=objs.tel;
document.getElementById("address").innerHTML=objs.address;
//document.getElementById("passds").innerHTML=objs.password;
$("#passds").html(objs.password);
},
error:function(XMLHttpRequest, textStatus, errorThrown){
alert("返回数据失败");
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(XMLHttpRequest.responseText);
alert(errorThrown);
}
})
}
Servlet将数据封装成json返回
JSONObject object = new JSONObject();
String key;
String value;
while(iterator.hasNext()){
Map.Entry entry = (Map.Entry) iterator.next();
if(entry.getKey().toString().equals("age")){
key = (String) entry.getKey();
value = String.valueOf((Integer) entry.getValue());
}else{
key = (String) entry.getKey();
value = (String) entry.getValue();
}
object.put(key, value);
}
//JSONArray array = new JSONArray();
request.setAttribute("map", map);
//object.put("resultMap", resultMap);
//array.add(object);
//[{"resultMap":{"id":"1702","sex":"男","address":"罗湖区","name":"刘国华","age":"22","tel":"15636735238","password":"123456"}}]
response.setCharacterEncoding("UTF-8");
// response.setContentType("application/json; charset=utf-8");
response.getWriter().write(object.toString());
//response.getWriter().write(array.toString());
//response.getWriter().println(array);
//response.getWriter().println(object);
//System.out.println(list);
System.out.println(object);
效果图
点击详情链接效果