欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ajax实现省市三级联动效果

程序员文章站 2022-03-20 14:50:14
本文实例为大家分享了ajax实现三级联动效果的具体代码,供大家参考,具体内容如下 1、html代码

本文实例为大家分享了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>

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

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

相关标签: ajax 三级联动