您的位置:首页 > Web前端 > JQuery

jquery用ajax取得数据的dialog对话框

2013-11-06 16:09 218 查看
1.usermanage.jsp
<script type="text/javascript">
$(function(){
//对话框样式可以去网上找找,也可以去改jquery的源码
$('#dialogSelect').dialog({
autoOpen: false,width: 320,height: 210,modal:true,
buttons: {
"关闭": function() { $(this).dialog("close"); }
}
});
$('#select').click(function(){
//name是要查看的用户名
var name=$("table").find("tr").eq(i).find("td").eq(1).html();
$.post("UserServlet", {
name : name,
action: "selectDialog"
}, function(data, textStatus) {
if (textStatus == "success") {
$("input[name=dianame]").val(data.name);
$("input[name=diamsg]").val(data.msg);
$("input[name=diaper]").val(data.permission);
}
}, "json");
$('#dialogSelect').dialog('open');
});
</script>
<input type="button"  name="select" id="select" value="弹出对话框" />
<!--下面的div不会显示在页面中,将最为对话框显示-->
<div id="dialogSelect" title="用户信息" style="padding-top:20px;">
<table width="260" border="1" bordercolor="gray"  align="center">
<tr >
<td>用户姓名</td>
<td><input type="text" name="dianame" readonly/></td>
</tr>
<tr>
<td>用户描述</td>
<td><input type="text" name="diamsg" readonly/></td>
</tr>
<tr>
<td>用户权限</td>
<td><input type="text" name="diaper" readonly/></td>
</tr>
</table>
</div>

2.UserServlet.java
String action=request.getParameter("action");
f("selectDialog".equals(action)){
/*查询当前用户信息*/
String name=request.getParameter("name");
name = new String(name.getBytes("iso-8859-1"),"utf-8");
user=uimpl.selectUser(name);
request.setAttribute("user", user);
PrintWriter out=response.getWriter();
out.print("success");
request.getRequestDispatcher("/userinfo.jsp").forward(request, response);
}

3.userinfo.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
{
"name":"${user.name}",
"pwd":"${user.pwd}",
"msg":"${user.msg}",
"permission":"${user.permission}"
}

dialog:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jquery ajax 对话框