jquery，ajax实现二级省市联动
Posted 柴鹏举
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery，ajax实现二级省市联动相关的知识，希望对你有一定的参考价值。
后台代码：
package com.weixin.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import com.weixin.dao.userDao;
public class demo1Servlet extends HttpServlet {
userDao ud = new userDao();
@Override
protected void service(HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
res.setCharacterEncoding("UTF-8");
String method = req.getParameter("method");
System.out.println(method);
if (method.equalsIgnoreCase("ajaxmod")) {
doajax(req, res);
} else if (method.equalsIgnoreCase("ajaxmod1")) {
try {
doajax1(req, res);
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
}else if(method.equalsIgnoreCase("ajaxmod2")){
try {
doajax2(req, res);
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
//查找city
private void doajax2(HttpServletRequest req, HttpServletResponse res) throws ClassNotFoundException, SQLException, IOException {
String p_id=req.getParameter("p_id");
System.out.println(p_id);
List<Map<String, Object>> list = ud.queryForCity(p_id);
//解析json需要的jar包如左 7
String city = JSONArray.fromObject(list).toString();
System.out.println(city);
PrintWriter pw = res.getWriter();
pw.write(city);
}
// 查找省份
private void doajax1(HttpServletRequest req, HttpServletResponse res)
throws ClassNotFoundException, SQLException, IOException {
List<Map<String, Object>> list = ud.queryForPro();
System.out.println(list);
String pro = JSONArray.fromObject(list).toString();
System.out.println(pro);
PrintWriter pw = res.getWriter();
pw.write(pro);
}
// 根据上面来
private void doajax(HttpServletRequest req, HttpServletResponse res) {
PrintWriter pw = null;
String name = req.getParameter("name");
boolean flag = ud.queryName(name);
try {
pw = res.getWriter();
} catch (IOException e) {
e.printStackTrace();
}
if (flag) {
pw.write("1");
}
}
}
===============================================
UserDao:
package com.weixin.dao;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.List;
import java.util.Map;
import com.weixin.Util.BaseDao;
public class userDao {
BaseDao bd = new BaseDao();
//he查用户名是否注册
public boolean queryName(String name) {
ResultSet rs = bd.executeQuery("select * from test where name='" + name
+ "'");
boolean flag = false;
try {
if (rs.next()) {
flag = true;
}
} catch (SQLException e) {
e.printStackTrace();
}finally{
bd.close(rs, null, null);
}
return flag;
}
//数据库查找省份的苏岩礁
public List<Map<String,Object>> queryForPro() throws ClassNotFoundException, SQLException{
ResultSet rs = bd.executeQuery("select * from dictionary where type='provence'");
System.out.println("rs: "+rs);
List<Map<String,Object>> list=bd.rsToList(rs);
System.out.println(list);
if(!list.isEmpty()){
return list;
}
return null;
}
//数据库查找省份下的city
public List<Map<String,Object>> queryForCity(String id) throws ClassNotFoundException, SQLException{
int p_id=Integer.valueOf(id);
System.out.println("p_id"+p_id);
ResultSet rs = bd.executeQuery("select * from dictionary where type='city' and parent_id = '"+p_id+"'");
List<Map<String,Object>> list=bd.rsToList(rs);
if(!list.isEmpty()){
return list;
}
return null;
}
}
===========================================================前台页面：
<!DOCTYPE html>
<html>
<head>
<title>demo2.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" ></script>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
$(function() {
//msg就是从上一个servlet中获取的字符串 直接解析
$.post("/ajaxDemo/demo1.do?method=ajaxmod1", function(msg) {
//怕产生浏览器差异 所以
var pro = eval("(" + msg + ")");
//alert(pro);
for ( var i = 0; i < pro.length; i++) {
$("#pro").append(
"<option value='"+pro[i].id+"'>" + pro[i].code
+ "</option>");
}
});
/* 写在里面function 加载页面面 */
$("#pro").change(
function() {
var pid = document.getElementById("pro").value;
$.post("/ajaxDemo/demo1.do?method=ajaxmod2&p_id=" + pid,
function(msg) {
//怕产生浏览器差异 所以
var pro = eval("(" + msg + ")");
for ( var i = 0; i < pro.length; i++) {
//在jquery里面 remove()是删除的元素还有其子元素 empty是删除其子元素
$("#city").empty()
.append(
"<option value='"+pro[i].id+"'>"
+ pro[i].code
+ "</option>");
}
});
});
});
</script>
</head>
<body>
<div align="center">
<select id="pro" style="width:80px">
<option value="">请选择</option>
</select> <select id="city">
<option value="">请选择</option>
</select>
</div>
</body>
</html>
以上是关于jquery，ajax实现二级省市联动的主要内容，如果未能解决你的问题，请参考以下文章