java ajax三级联动_ajax实现省市三级联动效果

本文实例为大家分享了ajax实现三级联动效果的具体代码，供大家参考，具体内容如下

1、html代码

Title

.wrap

{

background-color: beige;

width: 400px;

height: 200px;

margin: 0 auto;

text-align: center;

margin-top: 200px;

}

.wrap select

{

width:130px;

height: 30px;

}

function getctiydata() {

$("#city").empty();

var pid = $("#province").val();

$.ajax({

url:"/getCitys?pid="+pid,

dataType:"json"

}).done(function (data) {

for (var i in data)

{

$("#city").append($(""

+ data[i].name +""))

}

})

}

$.ajax({

url: "/getAllProvince",

dataType:"json"

}).done(function (data) {

for (var i in data)

{

$("#province").append($(""

+ data[i].name +""))

}

getctiydata()

});

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

getctiydata()

})

2、javaservlet

package servlet;

import DButil.DataSourceUtil;

import com.alibaba.fastjson.JSON;

import domain.Province;

import org.apache.commons.dbutils.QueryRunner;

import org.apache.commons.dbutils.handlers.BeanListHandler;

import javax.jws.WebService;

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.sql.SQLException;

import java.util.List;

@WebServlet("/getAllProvince")

public class ProvinceServlet extends HttpServlet

{

@Override

protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException

{

resp.setContentType("application/json;charset=utf8");

QueryRunner queryRunner = new QueryRunner(DataSourceUtil.getDataSource());

String sql = "select * from province";

try

{

List provinces = queryRunner.query(sql, new BeanListHandler(Province.class));

Object json = JSON.toJSON(provinces);

resp.getWriter().print(json);

} catch (SQLException e)

{

e.printStackTrace();

}

}

}

package servlet;

import DButil.DataSourceUtil;

import com.alibaba.fastjson.JSON;

import domain.City;

import org.apache.commons.dbutils.QueryRunner;

import org.apache.commons.dbutils.handlers.BeanListHandler;

import javax.jws.WebService;

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.sql.SQLException;

import java.util.List;

@WebServlet("/getCitys")

public class CityServlet extends HttpServlet

{

@Override

protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException

{

resp.setContentType("application/json;charset=utf8");

QueryRunner queryRunner = new QueryRunner(DataSourceUtil.getDataSource());

String pid = req.getParameter("pid");

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

try

{

List cities = queryRunner.query(sql, new BeanListHandler(City.class), pid);

Object toJSON = JSON.toJSON(cities);

resp.getWriter().print(toJSON);

} catch (SQLException e)

{

e.printStackTrace();

}

}

}

3、数据库池化

com.mysql.jdbc.Driver

jdbc:mysql://localhost:3306/text

root

root

0

以上就是省市联动的核心代码。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。