ajax实现省市三级联动效果

2024-09-01 08:31:15

字体：大中小

来源：转载

供稿：网友

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

1、html代码

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css">  .wrap  {   background-color: beige;   width: 400px;   height: 200px;   margin: 0 auto;   text-align: center;   margin-top: 200px;  }  .wrap select  {   width:130px;   height: 30px;  } </style> <script type="text/javascript" src="jquery-1.8.3.min.js"></script></head><body><div class="wrap"> <select id="province"> </select> <select id="city"> </select></div><script type="text/javascript"> 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($("<option value='"+ data[i].id +"'>"     + data[i].name +"</option>"))   }  })   } $.ajax({  url: "/getAllProvince",  dataType:"json" }).done(function (data) {  for (var i in data)  {   $("#province").append($("<option value = '"+data[i].id+"'>"    + data[i].name +"</option>"))  }  getctiydata() }); $("#province").change(function () {  getctiydata() })</script></body></html>

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<Province> provinces = queryRunner.query(sql, new BeanListHandler<Province>(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<City> cities = queryRunner.query(sql, new BeanListHandler<City>(City.class), pid);   Object toJSON = JSON.toJSON(cities);   resp.getWriter().print(toJSON);  } catch (SQLException e)  {   e.printStackTrace();  } }}

3、数据库池化

<?xml version="1.0" encoding="UTF-8"?><c3p0-config> <default-config>  <property name="driverClass">com.mysql.jdbc.Driver</property>  <property name="jdbcUrl">jdbc:mysql://localhost:3306/text</property>  <property name="user">root</property>  <property name="password">root</property>  <property name="acquireRetryAttempts">0</property> </default-config></c3p0-config>

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

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

上一篇：在layer弹出层中通过ajax返回html拼接字符串填充数据的方法

下一篇：使用Ajax模仿百度搜索框的自动提示功能实例