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

使用Json设置网页省份与城市的级联查询

2017-09-22 11:32 309 查看

创建ShengShi3Servlet

public class ShengShi3Servlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response) {
try {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
ShengShiDao shengshiDao =new ShengShiDao();
List<Sheng> sheng =shengshiDao.searchSheng();
int id=sheng.get(0).getId();
if(request.getParameter("id") ==null){
List<Shi> shi =shengshiDao.searchShiBySheng(id);
Sheng selectSheng =new Sheng();
selectSheng.setId(id);
selectSheng.setShi(shi);
request.setAttribute("sheng", sheng);
request.setAttribute("slelctsheng", selectSheng);
request.getRequestDispatcher("shengshi3.jsp").forward(request, response);
}
else{
id=Integer.parseInt(request.getParameter("id"));
List<Shi> shi =shengshiDao.searchShiBySheng(id);
PrintWriter out =response.getWriter();
int shilength=shi.size();
String str="[";
for(int i=0;i<shilength;i++){
str+="{\"id\":"+shi.get(i).getId()+",\"name\":"+"\""+shi.get(i).getName()+"\""+"},";

}
str=str.substring(0,str.length()-1);

str+="]";
out.print(str);

}

} catch (UnsupportedEncodingException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (ServletException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

}

public void doPost(HttpServletRequest request, HttpServletResponse response) {
doGet(request,response);
}

在web.xml配置访问

<servlet>
<servlet-name>ShengShi3Servlet</servlet-name>
<servlet-class>servlet.ShengShi3Servlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ShengShi3Servlet</servlet-name>
<url-pattern>/city3</url-pattern>
</servlet-mapping>

在jsp页面使用ajax进行异步请求查询

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>省市</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#sheng").change(function() {
$.ajax({
url : "city3",
type : "post",
data : {
id : $(this).val()
},
dataType : "json",
success : function(data) {
var str="";
$.each(data,function(index,element){

str+="<option value="+data[index].id+">"+data[index].name+"</option>";

})

$("#shi").html(str);
}

})

})

})
</script>
<style type="text/css">
#main {
margin: 0 auto;
width: 300px;
height: auto;
}
</style>
</head>

<body>
<div id="main">
省<select id="sheng">
<c:forEach items="${sheng }" var="sheng">
<option value="${sheng.id }"
<c:if test="${sheng.id==slelctsheng.id }">selected</c:if>>
${sheng.name}</option>
</c:forEach>

</select> 市<select id="shi">
<c:forEach items="${slelctsheng.shi }" var="select">
<option value="${select.id }">${select.name}</option>
</c:forEach>
</select>
</div>
</body>
</html>

思路：使用传统的方式与ajax混合使用，在第一次访问网页时，默认查询省份的第一条数据，城市绑定查询的第一个省份，在用户省份下拉框改变的时，用ajax进行触发（change事件）异步请求后台servlet根据发送的省份id查询所属市区的id，后台查询数据成功后进行json的数据格式的拼接发送后台，前台进行读取。

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

标签： json ajax

相关文章推荐

新的分享

章节导航