jquery ajax json 模态对话框（转载）

最新推荐文章于 2021-08-06 15:58:55 发布

dpn525

最新推荐文章于 2021-08-06 15:58:55 发布

阅读量120

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： Ajax jQuery json CSS JavaScript ViewUI

本文链接：https://blog.youkuaiyun.com/dpn525/article/details/83922019

jquery 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript和Ajax技术实现查询靓号类型的前端功能，包括服务层、动作层代码以及模态对话框的交互逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

service层代码代码

public JSONArray findPrettyRuleByName(String prettyRuleName,
			String wllx,
			ServletContext ctx) throws Exception {
		RootDaoInterface dao = DataSourceHelper.getDaoInterfae(ctx);
		String sql = "select id,zdxf,zxsc,ychf,name from tb_entity_lianghaoleixing where name like '%" + prettyRuleName + "%' and wllx = ?";
		JSONArray jSONArray = new   JSONArray();
			List list = dao.preparedQuery(sql, new Object[]{wllx});
			for (Iterator it = list.iterator(); it.hasNext();) {
				Hashtable ht = new Hashtable();
				ht = (Hashtable) it.next();
				JSONObject jSONObject =new JSONObject();
				jSONObject.put("id", ht.get("id").toString());
				jSONObject.put("zdxf",ht.get("zdxf").toString());
				jSONObject.put("zxsc", ht.get("zxsc").toString());
				jSONObject.put("name", ht.get("name").toString());
				jSONObject.put("ychf", ht.get("ychf").toString());
				jSONArray.put(jSONObject);
			}
						
		return jSONArray;

	}

Action层代码代码

public ActionForward selectPrettyRule(ActionMapping mapping,
			ActionForm form, HttpServletRequest request,
			HttpServletResponse response) {

		try {

			String prettyRuleName = request.getParameter("pName");
			String wllx = request.getParameter("wllx");
			prettyRuleName = new String(prettyRuleName.getBytes("ISO-8859-1"),
					"UTF-8");

			PrintWriter out = response.getWriter();
			JSONArray jsonArray = null;
			try {
				jsonArray = prettyRuleManageService.findPrettyRuleByName(
						prettyRuleName, wllx, this.getServlet()
								.getServletContext());
			} catch (Exception e) {
				e.printStackTrace();
			}
			// JSONArray array = JSONArray.fromObject(list);
			out.print(jsonArray.toString());
			out.flush();
			out.close();
		} catch (IOException e) {
			e.printStackTrace();
		}
		return null;
	}

模态对话框代码代码

<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="/WEB-INF/tlds/frame-database.tld" prefix="database"%>
<%@ taglib uri="/WEB-INF/tlds/frame-beans.tld" prefix="beans"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%
// 语句准备
String path = request.getContextPath();
String wllx = request.getParameter("wllx");
String sql = "select id,zdxf,zxsc,ychf,name from tb_entity_lianghaoleixing where wllx = '" + wllx + "'";
%>
<head>
<title>查询靓号类型</title>
<script type="text/javascript" src="<%=path%>/js/jquery-1.4.2.js" charset="UTF-8"></script>
<link rel="stylesheet" href="<%=path%>/css/main.css" type="text/css">
<script type="text/javascript" language="javascript">
$(document).ready(function() { 
	
		 var tishi = $("#tishi");
		 var search = $("#search");
		 var tbdy = $("#tbdy");

	$("#search").click(function (){
		var proName=$("#proName").val();
		search.attr("disabled","disabled");
		
		if(proName == null || proName == ""){
			tishi.html("");
			$("#tbdy").empty();
			search.removeAttr("disabled");
			alert("请输入查询条件");
			return;
		}
		
		 tishi.css("color","red").css("font-size","13").html("正在查询请稍后！");
		
		$.getJSON("<%=path %>/prettyRule.do?action=selectPrettyRule",
		{pName:proName,wllx:'<%=wllx %>'},
		function (data){
			if(data.length == 0 ){
				tishi.css("color","red").css("font-size","13").html("查询结束！");
				tishi.html("");
				$("#tbdy").empty();
				search.removeAttr("disabled");
				alert("没有找到相关记录，请重新输入查询条件");
				return;
			}
			tishi.html("");
			tishi.css("color","red").css("font-size","13").html("查询结束！");
			search.removeAttr("disabled");
			tbdy.empty();
			
			tbdy.append("<tr><td width='100px;' height='25' align='center' bgcolor='#E7F0F7' class='textAnmedia'>序号</td><td width='400px;' align='center' bgcolor='#E7F0F7' class='textAnmedia'>靓号类型名称</td></tr>");
			for(var i=0;i<data.length;i++){
				var aa = data[i].id + "|" + data[i].name + "|"+ data[i].zdxf + "|"+ data[i].zxsc + "|"+ data[i].ychf;
				$("#tbdy").append('<tr><td td align="center" bgcolor="#ffffff" class="tdIndex" >'
				+ data[i].id
				+'</td><td align="left" bgcolor="#ffffff" class="tdValue" style="cursor: pointer;" onclick="returnAllVaule(\'' + aa + '\')">' + data[i].name  +'</td></tr>');
			}
			
		$(".tdValue").mouseover(function(){
			var trNode = $(this);
			trNode.css("background","#FFFFFF").css("cursor","pointer").css("font-weight","bold").css("color","red");
		});
	
		$(".tdValue").mouseout(function(){
			var trNode = $(this);
			trNode.css("background","#F0F5F7").css("font-weight","normal").css("color","#7F9DB9");
		});
			
		});
		
	});
	$(".tdValue").mouseover(function(){
		var trNode = $(this);
		trNode.css("background","#FFFFFF").css("cursor","pointer").css("font-weight","bold").css("color","red");
	});

	$(".tdValue").mouseout(function(){
		var trNode = $(this);
		trNode.css("background","#F0F5F7").css("font-weight","normal").css("color","#7F9DB9");
	});
});
function returnAllVaule(AllVaule) {
	window.returnValue = AllVaule;
	window.close();
}
</script>
<style type="text/css">

#input_select{
position:absolute;
left:130px;
top:100px;
}

#tableList{
position:absolute;
top:170px;
}

</style>
</head>
<body>
<table width="600px" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="73A2D6">
	<tr>
		<td colspan="4" align="center" height="25" background="<%=path%>/images/bg_gen_head.jpg" >靓号类型查询</td>
	</tr>
	<tr bgcolor="#FFFFFF">
		<td width="15%" height="25px;" align="right" bgcolor="#E7F0F7">靓号名称：</td>
		<td width="85%" align="left">
			<input type ="text" id="proName" style=width:150px;/>
			<input type="button"  value="  查询  " id="search"/><span id="tishi"></span>
		</td>
	</tr>
</table>

<br/>

<div id="listContent" align="center">
<table width="500px" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="73A2D6">
<tbody id="tbdy">
<tr>
	<td colspan="9" align="center" height="25" background="<%=path%>/images/bg_gen_head.jpg" >查询结果如下</td>
</tr>
	<tr bgcolor="#8EC0E6">
		<td width="100px;" height="25" align="center" bgcolor="#E7F0F7" class="textAnmedia">
			 编号
		</td>
		<td width="400px;"align="center" bgcolor="#E7F0F7" class="textAnmedia">
			靓号类型名称
		</td>
	</tr>
	<beans:tagHandle id="tagID">
		<database:prepareQuery id="<%=tagID%>" scope="page"> 
		<%=sql%>
		</database:prepareQuery>
		<database:rows id="db" query='<%=tagID%>' autoGrid="false">
		<tr>
			<td align="center" bgcolor="#ffffff" style="cursor: pointer;" class="tdIndex" ><%=db.get("id") %></td>
			<td align="left" bgcolor="#ffffff" style="cursor: pointer;" class="tdValue" onclick="returnAllVaule('<%=db.get("id") + "|" + db.get("name") + "|" + db.get("zdxf")  + "|" + db.get("zxsc")  + "|" + db.get("ychf") %>')"><%=db.get("name") %></td>
		</tr>
		</database:rows>
	<database:release query='<%=tagID%>' />
	</beans:tagHandle>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>

点击按钮弹出模态对话框的js代码

$("#proid").click(function (){
		if($('#wllx').val() == '-1'){
			alert('请选择网络类型');
			return false;
		}
		var value = window.showModalDialog($('#path').val() + '/jsp/haoka/prettyRuleManage/prettyTypeQuery.jsp?wllx=' + $("#wllx").val(),'','');
		$("#prettyTypeId").val(value.split('|')[0]);
		$("#prettyType").val(value.split('|')[1]);
		$("#zdxf").val(value.split('|')[2]);
		$("#zxsc").val(value.split('|')[3]);
		$("#ychf").val(value.split('|')[4]);
	});

点击按钮弹出模态对话框代码

<input type="text" id="prettyType" name="prettyType" readonly="readonly"&nbsp; style="width: 345px;"/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<input type="button"&nbsp; value="点击查找靓号类型" id="proid"/>