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

jquery—ajax的异步交互，返回json串，再弹出层显示数据

2013-03-26 14:21 465 查看

外部引用的js文件

/**
* 外部js文件
*/

function showCustomerInfoById(id){
$("#text").html("正在加载，请稍后。。。");
$("#dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 500,
width:350,
show: "blind",
modal: true,
buttons: {
'确定': function() {
$(this).dialog('close');
}
}
});
$("#dialog").dialog("open");
$.getJSON(
"QueryOneServlet",
{"id":id},
function(json){
var str = "<table>";
if(json.length>0){
for(var i = 0;i<json.length;i++){
str+="<tr><td>用户名</td><td>密码</td></tr><tr><td>"+json[i].name+"</td><td>"+json[i].age+"</td></tr>";
}
str+="</table>";
}else{
alert("没有");
}
$("#text").html(str);

});

}

jsp页面：（分页可以不看，主要演示弹出层和往弹出层上面写数据）

<%@ page language="java" contentType="text/html; charset=gbk"
pageEncoding="gbk" import="java.util.*,com.wztx.java.MybatisTest"%>

<html>
<head>

<title>main</title>
</head>
<script src="jquery-1.5.js"></script>
<script src="jquery-ui-1.8.9.custom.min.js"></script>
<script src="js/commen.js" type="text/javascript" charset="gbk"></script>
<link rel="stylesheet" type="text/css" href="css/jquery/jquery-ui-1.8.9.custom.css" />

<body>
<form action="QueryServlet">
<table border="1">
<tr>
<td colspan="6" align="right">客户名称：<input type="text" name="c_name" value="<%=request.getParameter("c_name")%>">
<input type="submit" value="搜索"></td>
</tr>
<tr>
<td>客户名称</td>
<td>客户地址</td>
<td>客户电话</td>
<td>客户所属人</td>
<td>客户状态</td>
<td>操作栏</td>
</tr>
<%
List customer = (List)request.getAttribute("customer");
String nowPage= request.getParameter("nowPage");
for(int i =0;i<customer.size();i++){
Map map = (Map)customer.get(i);

%>
<tr>
<td><%=map.get("customer_name") %></td>
<td><%=map.get("address") %></td>
<td><%=map.get("cs_tele") %></td>
<%
String name=(String)map.get("username");
if(name==null){
%><td>
没有所属人
</td>
<%
}else{
%>
<td>
<%=name %>
</td>
<%
}
%>
<td><%=map.get("codeitem_name") %></td>
<td>
<input class="more" type="button" onclick="showCustomerInfoById(<%=map.get("customer_id")%>)" value="详情">
</td>
</tr>
<%
}
%>
<tr>
<td colspan="6" align="right">
<a href="QueryServlet?flag=up&Page=<%=nowPage%>&c_name=<%=request.getParameter("c_name") %>">上一页</a>
<a href="QueryServlet?flag=down&Page=<%=nowPage%>&c_name=<%=request.getParameter("c_name") %>">下一页</a>
当前第<%=nowPage%>页</td>

</tr>
</table>
<div id="dialog" style="display:none;"><span id="text"></span></div>
</form>
</body>
</html>

servlet核心代码：

String id=request.getParameter("id");
int c_id = Integer.parseInt(id);

ArrayList<HashMap> list = new ArrayList<HashMap>();
//向map中添加数据，模拟数据库。
for(int i= 0 ; i<10;i++){
HashMap map = new HashMap();
map.put("name", "student_"+i);
map.put("age",20+i);
list.add(map);
}
JSONArray studentArray = JSONArray.fromObject(list);
System.out.println(studentArray.toString())
response.getWriter().print(studentArray.toString());
response.getWriter().flush();
response.getWriter().close();

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航