ajax实现省市三级联动效果
本文实例为大家分享了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实现三级联动的基本方法
本文实例为大家分享了ajax实现三级联动的具体代码,供大家参考,具体内容如下 1.首先在一个页面上布置一个div 方便日后引用方法 <body> <div id="sanji">//div的id为"sanji" </div> 2.sanji js处理页面 $(document).ready(function(){ //向div里面放三个下拉菜单 var str = "<select id='sheng'>&l
-
ajax三级联动的实现方法
ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如说北京吧,北京的代号是11,它下面的北京市副代号就11, 北京市的主代号是1101,北京市下面的地区副代号就是1101,调地区的时候可以根据主代号查询和它相同的副代号,就能查询出来 想要让三级联动的内容在页面显示,只需要在页面建一个div就可以了 <div id="sanji">
-
PHP+Mysql+Ajax+JS实现省市区三级联动
基本思想就是:在JS动态创建select控件的option,通过Ajax获取在PHP从SQL数据库获取的省市区信息,代码有点长,但很多都是类似的,例如JS中省.市.区获取方法类似,PHP中通过参数不同执行不同的select语句. index.html代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xh
-
ajax实现无刷新省市县三级联动
本文实例为大家分享了ajax实现无刷新省市县三级联动的具体代码,供大家参考,具体内容如下 效果图: 实现代码: 1.html: <html> <head> <title></title> <style type="text/css"> select { width: 150px; } </style> <script src="js/Jquery1.7.js" type="tex
-
jquery+ajax实现省市区三级联动 （封装和不封装两种方式）
首先,要实现如下图效果, 1.要理清思路: 先做出三个下拉菜单----根据第一个下拉菜单的value值获取第二个下拉列表的内容,第三个同理. 2.用到的数据库表:Chinastates表 规律:根据国家级(中国)的areacode查询省级(如:北京) ; 根据省级的areacode查询市级(如:北京市辖):根据市级的areacode查询区级(如东城区) 第一种方式:没有用到封装,数据读取较慢,可以看看原理,这样在第二种方式封装时就容易多了. 代码如下: <!DOCTYPE html> <
-
asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例
本文主要列举了省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例.前段时间需要作一个的Web前端应用,需要用多个框架,一个典型的应用场景是省市三级联动,基于此应用,特将三种主要的ajax框架略作整理,方便有需要的朋友查阅. 在示例之前,我们先设置一个演示数据源,新建一个项目,项目结构如图: 主要文件如下:AreaModel.cs: 复制代码 代码如下: using System; using System.Collections.Generi
-
jQuery ajax实现省市县三级联动
下面我们用Jquery,ajax,做一个省,市,县的三级联动: 下面是我做三级联动下拉的步骤以及逻辑 第一步:先做一个省市区表格 第二步:建个PHP页面显示用我是在<body>里放<div>用来接收要显示的省市区表格信息,里面嵌入jquery-1.11.2.min.js和自己封装的三联动省市区的方法 第三步:写封装方法用JS 第四步:做个纯php处理页面,这个页面处理传过来的任何代号 首先我们要建立数据库: 这就是包含省,市,县的数据库. 下面我们就写主页面:sanji.php:
-
ajax三级联动下拉菜单效果
ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可: 来找一张表: 实现: 中国地域的三级联动:省.市.区: 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过ajax发出请求传递到服务端的程序中 (2)比如取中国地域,中国是0001,那么自带号为0001的便是中国地域: 北京的代号为11,那么子代号为11的便是北京时的市区, 也就是说根据主代号查询子代号: (3)服务端根据客户端的请求,查询数据库,并按照一定的格式返回给客户端 显示页面非常简单,只需要一
-
AJAX省市区三级联动下拉菜单(java版)
此小程序的功能主要是采用异步请求方式从数据库中调取省市区信息显示到下拉列表: 代码如下: 建立数据库中的代码和一些配置文件信息就省略了,主要有JavaScript中的代码为: $(document).ready(function(){ $.get("getProvince.do", function(result){ $("#showp").html(result); }); }) var xmlhttp; function mysend(str){ $(docum
-
jquery+ajax实现省市区三级联动效果简单示例
本文实例讲述了jquery+ajax实现省市区三级联动效果.分享给大家供大家参考,具体如下: 一直想学习下Ajax,没时间,汗,这借口太牵强了.下了点教程在手机里,翻了好几遍了,没实战一次. 最近的项目里需要Ajax实现效果,就下了个jquery,然后找了个实例,学习了一下,幡然醒悟,NND,jquery果然强大的一塌糊涂,实现Ajax简直就是不费吹灰之力.下面把学习过程跟大家分享下,虽然还没有搞清楚jquery ajax的底层相关.不管了.我们不需要去发明轮子.呵呵. 先上代码,是一个省市区三