Ajax+servlet+ json+ mysql+jsp 實現省市聯動
阿新 • • 發佈：2019-01-31
CityServlet
package com.suse.servlet; import java.io.IOException; import java.util.List; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.suse.dao.CityDao; import com.suse.dao.impl.CityDaoImpl; import com.suse.entity.City; import net.sf.json.JSONArray; /** * Servlet implementation class CityServlet */ @WebServlet("/citylist") public class CityServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse * response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub try { //獲取引數 int pid = Integer.parseInt(request.getParameter("pid")); //找出所有城市資料 CityDao cityDao = new CityDaoImpl(); List<City> list = cityDao.findCity(pid); System.out.println(list.get(0).getCname()); //返回資料把list--->json資料 JSONArray jsonArray=JSONArray.fromObject(list); String json=jsonArray.toString(); System.out.println("json="+json); response.setContentType("text/html;charset=utf-8"); response.getWriter().write(json); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse * response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } }
CityDao
package com.suse.dao;
import java.util.List;
import com.suse.entity.City;
public interface CityDao {
//返回的是一個城市集合
List<City> findCity(int pid) throws Exception ;
}
CityDaoImpl
package com.suse.dao.impl; import java.sql.Connection; import java.sql.ResultSet; import java.util.ArrayList; import java.util.List; import com.mysql.jdbc.PreparedStatement; import com.suse.dao.CityDao; import com.suse.entity.City; import com.suse.util.DbHelper; public class CityDaoImpl implements CityDao { @Override public List<City> findCity(int pid) throws Exception { // TODO Auto-generated method stub List<City> list = new ArrayList<City>(); //City city = new City();物件不應再次建立，而是每次查詢出來要在迴圈裡建立物件 Connection conn = DbHelper.getConn(); String sql = "select * from city where pid = ?"; PreparedStatement pstmt = (PreparedStatement) conn.prepareStatement(sql); pstmt.setInt(1, pid); ResultSet rs = pstmt.executeQuery(); while (rs.next()) { City city = new City(); city.setId(rs.getInt("id")); city.setCname(rs.getString("cname")); city.setPid(rs.getInt("pid")); System.out.println(rs.getInt("id")); list.add(city); } return list; } }
json.js
$(function() { // 1.找到省份元素 $("#province").change(function() { // 2.一旦裡面的值發生可改變，那麼就去請求的該省份的元素 // $.post(url,引數，回撥函式); var pid = $(this).val(); $.post("citylist", { pid : pid }, function(data, status) { // alert("huidiao"+data); /* * [{ "cname": "成都", "id": 5, "pid": 2 }, { "cname": "綿陽", "id": 6, * "pid": 2 }, { "cname": "宜賓", "id": 7, "pid": 2 }, { "cname": * "廣安", "id": 8, "pid": 2 }] */ // 先清空 $("#city").html("<option value=''>-請選擇-"); // 在遍歷 $(data).each(function(index, c) { // alert(c.cname); $("#city").append("<option value='" + c.id + "'>" + c.cname); }); }, "json"); }); });
city.jsp
<%@ page language="java" contentType="text/html; charset=utf-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
String path = request.getContextPath();
out.print(path);
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="<%=path%>/js/jquery-3.2.1.js"></script>
<script src="js/json.js"></script>
</head>
<body>
省份：<select name="province" id="province">
<option value="">-請選擇-
<option value="1">廣東
<option value="2">四川
<option value="3">重慶
<option value="4">湖南
</select>
城市：
<select name="city" id="city">
<option value="">-請選擇-
</select>
</body>
</html>DbHelper
package com.suse.util;
import java.sql.Connection;
import java.sql.DriverManager;
public class DbHelper {
private static String URL = "jdbc:mysql://127.0.0.1:3306/ajax?useUnicode=true&characterEncoding=utf-8";
private static String Driver = "com.mysql.jdbc.Driver";
private static String user = "root";
private static String password = "";
public static Connection getConn() throws Exception {
Class.forName(Driver);
Connection conn = DriverManager.getConnection(URL, user, password);
return conn;
}
}City.java
package com.suse.entity;
public class City {
private int id;
private String cname;
private int pid;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getCname() {
return cname;
}
public void setCname(String cname) {
this.cname = cname;
}
public int getPid() {
return pid;
}
public void setPid(int pid) {
this.pid = pid;
}
}