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

思念是荒芜的梦

发布于 2026-01-09 12:28:02

730

外部引用的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();

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2013-03-26，如有侵权请联系 cloudcommunity@tencent.com 删除

数据