主页 > 知识库 > ajax实现省市三级联动效果

ajax实现省市三级联动效果

热门标签:外呼系统api对接 大学校门地图标注 提高电话机器人接通率 广西智能外呼系统多少钱 福建微码电话机器人 销售电销机器人诈骗 地图标注与公司业务关系 平凉高德地图标注商户要收费吗 荆州智能电销机器人

本文实例为大家分享了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
  {
   ListProvince> provinces = queryRunner.query(sql, new BeanListHandlerProvince>(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
  {
   ListCity> cities = queryRunner.query(sql, new BeanListHandlerCity>(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>

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

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

您可能感兴趣的文章:
  • PHP+Mysql+Ajax+JS实现省市区三级联动
  • AJAX省市区三级联动下拉菜单(java版)
  • ajax三级联动下拉菜单效果
  • ajax三级联动的实现方法
  • ajax实现无刷新省市县三级联动
  • ajax实现三级联动的基本方法
  • Ajax商品分类三级联动的简单实现(案例)
  • Ajax+php实现商品分类三级联动
  • 简单实现ajax三级联动效果
  • AJAX实现省市县三级联动效果

标签:黔东 德阳 乐山 娄底 内江 衡阳 海南 邯郸

巨人网络通讯声明:本文标题《ajax实现省市三级联动效果》,本文关键词  ajax,实现,省市,三级,联动,;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 下面列出与本文章《ajax实现省市三级联动效果》相关的同类信息!
  • 本页收集关于ajax实现省市三级联动效果的相关信息资讯供网民参考!
  • 企业400电话

    智能AI客服机器人
    15000

    在线订购

    合计11份范本:公司章程+合伙协议+出资协议+合作协议+股权转让协议+增资扩股协议+股权激励+股东会决议+董事会决议

    推荐文章