ajax省地区代码,三级联动省市ajax的代码

我只写到了市剩下的区可以复制粘贴的很简单

所需要的jar包有

代码如下

创建数据库

CREATE database provinces CHARACTER set utf8;

use provices;

CREATE table province (

pid INT PRIMARY KEY auto_increment,

pname varchar(20)

);

INSERT into province VALUES (null,"河南省");

INSERT into province VALUES (null,"海南省");

INSERT into province VALUES (null,"台湾省");

INSERT into province VALUES (null,"山东省");

INSERT into province VALUES (null,"河北省");

CREATE table city (

cid INT PRIMARY KEY auto_increment,

cname varchar(20),

pid int

);

INSERT into city VALUES(null,"漯河市",1);

INSERT into city VALUES(null,"菏泽曹县",4);

INSERT into city VALUES(null,"高雄市",3);

INSERT into city VALUES(null,"保定",5);

INSERT into city VALUES(null,"三亚市",2);

首先创建 City 和 Province 类 给getter setter tostring 以及 构造方法 Province类

package cn.hp.model;

public class Province {

private int pid;

private String pname;

public int getPid() {

return pid;

}

public void setPid(int pid) {

this.pid = pid;

}

public String getPname() {

return pname;

}

public void setPname(String pname) {

this.pname = pname;

}

@Override

public String toString() {

return "Province{" +

"pid=" + pid +

", pname='" + pname + '\'' +

'}';

}

public Province(int pid, String pname) {

this.pid = pid;

this.pname = pname;

}

public Province() {

}

}

City类

package cn.hp.model;

public class City {

private int cid;

private String cname;

private int pid;

public City() {

}

public int getCid() {

return cid;

}

@Override

public String toString() {

return "City{" +

"cid=" + cid +

", cname='" + cname + '\'' +

", pid=" + pid +

'}';

}

public void setCid(int cid) {

this.cid = cid;

}

public String getCname() {

return cname;

}

public City(String cname, int pid) {

this.cname = cname;

this.pid = pid;

}

public void setCname(String cname) {

this.cname = cname;

}

public int getPid() {

return pid;

}

public void setPid(int pid) {

this.pid = pid;

}

public City(int cid, String cname, int pid) {

this.cid = cid;

this.cname = cname;

this.pid = pid;

}

}

连接数据库

package cn.hp.util;

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.SQLException;

public class ConnDemo {

private static String Driver ="com.mysql.jdbc.Driver";

private static String Url = "jdbc:mysql://localhost:3306/provinces?characterEncoding=utf8";

private static String user ="root";

private static String pwd ="123456";

public static Connection conn;

public static Connection getConn() {

try {

Class.forName(Driver);

conn = DriverManager.getConnection(Url, user, pwd);

} catch (Exception e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

return conn;

}

public static void getClose() {

try {

if (conn != null) {

conn.close();

}

} catch (SQLException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

}

// �������ݿ�����

public static void main(String[] args) {

System.out.println(getConn());

if (getConn()!=null) {

System.out.println("���ӳɹ�");

}

}

}

创建 接口 ProvinceInfoDao

package cn.hp.dao;

import cn.hp.model.Province;

import java.util.List;

public interface ProvinceInfoDao {

public List findAll();

}

实例化对象ProvinceInfoDaoImpl

package cn.hp.dao;

import cn.hp.model.Province;

import cn.hp.util.ConnDemo;

import java.sql.Connection;

import java.sql.PreparedStatement;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.util.ArrayList;

import java.util.List;

public class ProvinceInfoDaoImpl implements ProvinceInfoDao {

@Override

public List findAll() {

Connection conn= ConnDemo.getConn();

List list= new ArrayList();

String sql="select * from provice";

try {

PreparedStatement ps= conn.prepareStatement(sql);

ResultSet rs= ps.executeQuery();

while (rs.next()){

Province p= new Province();

p.setPid(rs.getInt(1));

p.setPname(rs.getString(2));

list.add(p);

}

} catch (SQLException e) {

e.printStackTrace();

}

return list;

}

}

以及CityInfoDao接口

package cn.hp.dao;

import cn.hp.model.City;

import java.util.List;

public interface CityInfoDao {

public ListfindAllCity(int pid);

}

CityInfoDaoImpl实例化对象

package cn.hp.dao;

import cn.hp.model.City;

import cn.hp.model.Province;

import cn.hp.util.ConnDemo;

import java.sql.Connection;

import java.sql.PreparedStatement;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.util.ArrayList;

import java.util.List;

public class CityInfoDaoImpl implements CityInfoDao {

@Override

public List findAllCity(int pid) {

Connection conn= ConnDemo.getConn();

List list= new ArrayList();

String sql="select * from city where pid =?";

try {

PreparedStatement ps= conn.prepareStatement(sql);

ps.setInt(1,pid);

ResultSet rs= ps.executeQuery();

while (rs.next()){

City c= new City();

c.setCid(rs.getInt(1));

c.setCname(rs.getString(2));

c.setPid(rs.getInt(3));

list.add(c);

}

} catch (SQLException e) {

e.printStackTrace();

}

return list;

}

}

写servlet FindProvinceServlet 以及FindCityPidServlet

FindProvinceServlet

package cn.hp.servlet;

import cn.hp.dao.ProvinceInfoDao;

import cn.hp.dao.ProvinceInfoDaoImpl;

import cn.hp.model.Province;

import com.alibaba.fastjson.JSONObject;

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 java.io.IOException;

import java.util.List;

@WebServlet("/findProvince")

public class FindProvinceServlet extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

request.setCharacterEncoding("utf-8");

response.setContentType("text/html;charset=utf-8");

ProvinceInfoDao pid=new ProvinceInfoDaoImpl();

List plist =pid.findAll();

response.getWriter().write(JSONObject.toJSONString(plist));

}

}

FindCityPidServlet

package cn.hp.servlet;

import cn.hp.dao.CityInfoDao;

import cn.hp.dao.CityInfoDaoImpl;

import cn.hp.model.City;

import com.alibaba.fastjson.JSONObject;

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 java.io.IOException;

import java.util.List;

@WebServlet("/findCityByPid")

public class FindCityByPidServlet extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

request.setCharacterEncoding("utf-8");

response.setContentType("text/html;charset=utf-8");

String id = request.getParameter("id");

CityInfoDao cid= new CityInfoDaoImpl();

List clist = cid.findAllCity(Integer.parseInt(id));

response.getWriter().write(JSONObject.toJSONString(clist));

}

}

最后是jsp页面

$Title$

$(function () {

$.ajax({

type:"get",

url:"findProvince",

dataType:"json",

success:function (data) {

var obj= $("#province");

for (var i=0;i

// var ob= ""+data[i].pname+""

var ob= ""+data[i].pname+""

obj.append(ob)

}

}

})

})

请选择

省

请选择

市

请选择

区

$("#province").change(function () {

$("#city option").remove();

$.ajax({

type:"get",

url:"findCityByPid?id="+$("#province").val(),

dataType: "json",

success:function (data) {

var obj= $("#city");

for (var i=0;i

var ob= ""+data[i].cname+""

obj.append(ob)

}

}

})

});

总结

本篇文章就到这里了，希望能给你带来帮助，也希望您能够多多关注脚本之家的更多内容！