DWR实现省市县三级联动 - DWR - AJAX

合集下载

ajax实现省市三级联动效果

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、javaservletpackage servlet;import DButil.DataSourceUtil;import com.alibaba.fastjson.JSON;import domain.Province;import mons.dbutils.QueryRunner;import mons.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{@Overrideprotected 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 mons.dbutils.QueryRunner;import mons.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{@Overrideprotected 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>以上就是省市联动的核⼼代码。

thinkphpjquery与ajax实现省市区三级联动菜单

题目：thinkphp jquery与ajax实现省市区三级联动菜单thinkphp jquery与ajax实现省市县三级联动菜单本示例以省市区三级联动菜单为例：实现步骤：第一：先默认从数据库中读取所有的省份。

第二：通过jquery中的change事件，当省份的内容发生改变时，执行change事件，通过jquery 获得被选中的省份的value值，再后通过异步加载数据。

第三：与第二步相似，当用户选择城市时，会触发change事件，通过jquery 获得被选中的城市的value值，再次进行异步加载数据。

具体示例代码如下：RecruitmentAction.class.phpclass RecruitmentAction extends Action{public function chacity(){$code=I(post.code$city=M(where(array(provincecode$code))-select();echo "option value=请选择城市/optionif($city){foreach($city as $c){echo "option value=".$c[".$c[/optionpublic function chaarea(){ $code=I(post.code$area=M(where(array(citycode$code))-select();echo "option value=/optionif($area){foreach($area as $a){echo "option value=".$a[".$a[/optionpublic function chacitydefault(){ $code=I(post.code$city=M(where(array(provincecode$code))-select();if($city){foreach($city as $c){echo "option value=".$c[".$c[public function chaareadefault(){$code=I(post.code$area=M(where(array(citycode$code))-select();if($area){foreach($area as $a){echo "option value=".$a[".$a[/optionsendrecruitment.phpmeta charset="utf-8"/title省市县三级联动菜单/tiltescirpt src="/jquery/1.11.1/jquery.min.js"script$(function(){#sheng).change(function(){ var code=$(#sheng option:selected ).val();$.post(__URL__/chacity:code},function(data){ #city).html(data);#city).change(function(){ var code=$(#city option:selected ).val();$.post(__URL__/chaarea:code},function(data){).html(data);var code=$(#sheng option).eq(0).val();$.post(__URL__/chacitydefault:code},function(data){#city).html(data);var areacode=110100; $.post(__URL__/chaareadefault :areacode},function(data){ #area).html(data);/script/head$m=M(province$p=$m-id ascselect();input type="text" name="jobplace" value="" /select name="job_province" id="sheng" style="width:100px;"if($p){foreach($p as $v){option value="php echo $v[php echo $v[/option/selectselect name="job_city" id="city" style="width:100px;"/selectselect name="job_area" id="area" style="width:100px;"/select/body/html注：本示例中，控制器部分：chacitydefault()，chaareadefault()方法是为了默认页面加载时，执行一次，让省，市，与区进行显示。

JavaScript实现省份城市的三级联动

JavaScript实现省份城市的三级联动本⽂实例为⼤家分享了js实现省份城市的三级联动的具体代码，供⼤家参考，具体内容如下效果图：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>select{width: 80px;margin: 5px;}</style><script>// 省份数组var provinceArr = ['上海', '江苏', '河北'];// 城市数组var cityArr = [['上海市'],['苏州市', '南京市', '扬州市'],['⽯家庄', '秦皇岛', '张家⼝']];// 区域数组var countryArr = [[['黄浦区', '静安区', '长宁区', '浦东区']],[['虎丘区', '吴中区', '相城区', '姑苏区', '吴江区'],['⽞武区', '秦淮区', '建邺区', '⿎楼区', '浦⼝区'],['邗江区', '⼴陵区', '江都区']],[['长安区', '桥西区', '新华区', '井陉矿区'],['海港区', '⼭海关区', '北戴河区', '抚宁区'],['桥东区', '桥西区', '宣化区', '下花园区']]];window.onload = function(){var province = document.getElementById('province');var city = document.getElementById('city');var country = document.getElementById('country');createOption(province, provinceArr);province.onchange = function(){city.length = 0;createOption(city, cityArr[this.selectedIndex]);city.onchange();}city.onchange = function(){country.length = 0;createOption(country, countryArr[province.selectedIndex][this.selectedIndex]);}province.onchange();}function createOption(obj, data){for (var i = 0; i < data.length; i++) {var newOption = new Option(data[i], data[i]);obj.add(newOption, null);}}</script></head><body>省份<select name="" id="province"></select>城市<select name="" id="city"></select>区域<select name="" id="country"></select></body></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

如何制作云表省市区三级联动

如何制作云表省市区三级联动我们在表单的填报过程中，经常需要填写省市区信息，如何实现快捷方便的联动填写呢？已有《省市区》模板，“省市区”数据批量导入；有以下3种实现方式：①下列列表联动②列表选择联动③树形列表联动一、下拉列表在“省份”上单击【﹀】从“省份下拉列表”中选择省份“江苏省”，在“城市”上单击【﹀】，弹出的下拉列表中只显示“江苏省下所有的城市列表”，选择“南京市”后，在“地区”上单击【﹀】，弹出的下拉列表中只显示“南京市下所有的地区列表”，实现联动实现分析：上图中以下拉列表的方式呈现数据，使用下拉列表的数据接口；省市区基础数据存放在《省市区》模板中，需要设计3个数据接口。

第1个数据接口“所有省份下拉列表”，没有参数，将所有的省份去重筛选出来，以便选择；第2个数据接口“根据省查询所有城市下拉列表”，有1个参数“省份”；第3个数据接口“根据省和城市查询所有地区下拉列表”，有2个参数“省份”和“城市”；在《客户档案》模板中调用已设计好的数据接口并给参数赋值；①在《省市区》模板中设计数据接口“省份下拉列表”。

该数据接口的类型为“下拉列表”，“取值”来自“数据表”“本模板”的“省份”数据项；②在《省市区》模板中设计数据接口“查询城市下拉列表（省份）”。

该数据接口的类型为“下拉列表”，“取值”来自“数据表”“本模板”的“城市”数据项；需要筛选指定“省份”的城市列表，设置“过滤设置”，选择“表达式过滤”，添加参数“省份”，并填写“过滤条件”；③在《省市区》模板中设计数据接口“查询地区下拉列表（省份，城市）”。

该数据接口的类型为“下拉列表”，“取值”来自“数据表”“本模板”的“地区”数据项；需要筛选指定“省份”和“城市”的城市列表，设置“过滤设置”，选择“表达式过滤”，添加参数“省份”和“城市”，并填写“过滤条件”；④在《客户档案》的填写规范中调用已设置的数据接口。

进入《客户档案》的模板设计界面，打开“数据定义管理”，在“省份”的填写规范上调用《省市区》的“省下拉列表”；⑤在“城市”的填写规范上调用《省市区》的“查询城市下拉列表（省份）”，该数据接口带有1个参数，将“本表单.省份”赋值给参数，并勾选“必填”，则只有当“本表单的省份”填写后，再单击城市的【﹀】才会运行该数据接口进行查询；⑥在“地区”的填写规范上调用《省市区》的“查询地区下拉列表（省份，城市）”，该数据接口带有2个参数，将“本表单.省份”和“本表单.城市”赋值给参数，并勾选“必填”，则只有当“本表单的省份和城市”都填写后，再单击地区的【﹀】才会运行该数据接口进行查询；这种实现方式用户需要单击进行选择，选项过多时，比较浪费时间，是否可以根据用户知道某几个字模糊查询并选择填写提高效率呢？二、列表选择联动在“省份”上填写内容后，下方根据填写的内容弹出模糊查询符合条件的省份列表，选择省份“广东省”，在“城市”上填写内容时，下方根据填写的内容在“广东省”内模查询符合条件的城市列表，在“地区”上填写内容后，下方根据填写的内容，在“广东省广州市”内模糊查询符合条件的地区列表；实现分析：省市区基础数据存放在《省市区》模板中，需要设计3个数据列表选择的数据接口，勾选“支持模糊查询”。

DjangoAdmin实现三级联动的示例代码（省市区）===小白级

DjangoAdmin实现三级联动的⽰例代码（省市区）===⼩⽩级⼀使⽤环境开发系统: windows IDE: pycharm 数据库: msyql,navicat 编程语⾔: python3.7 (Windows x86-64 executable installer) 虚拟环境: virtualenvwrapper 开发框架: Django 2.2 Django 2.2通病===>访问admin出现问题: 报错:UnicodeDecodeError: 'gbk' codec can't decode byte 0xa6 in position 9737: illegal multibyte sequence 解决⽅法:⼆ Django Admin 实现三级联动的⽰例代码(省市区)===>⼩⽩级1. 在 model.py 中from django.db import models# ⼈员class Member(models.Model):name = models.CharField(max_length=100, verbose_name='姓名')province = models.ForeignKey('Province', on_delete=models.PROTECT, null=True, blank=True, verbose_name='省份')city = models.ForeignKey('City', on_delete=models.PROTECT, null=True, blank=True, verbose_name='城市')district = models.ForeignKey('District', on_delete=models.PROTECT, null=True, blank=True, verbose_name='区/县')class Meta:verbose_name_plural = verbose_name = '00-⼈员'def __str__(self):return # 省份class Province(models.Model):省份 = models.CharField(max_length=100, null=True, blank=True, verbose_name='省份')class Meta:verbose_name_plural = verbose_name = '01-省份'def __str__(self):return self.省份# 城市class City(models.Model):城市 = models.CharField(max_length=100, null=True, blank=True, verbose_name='城市')省份 = models.ForeignKey('Province', on_delete=models.PROTECT, null=True, blank=True, related_name='城市_省份',verbose_name='省份')class Meta:verbose_name_plural = verbose_name = '02-城市'def __str__(self):return self.城市# 区/县class District(models.Model):区县 = models.CharField(max_length=100, null=True, blank=True, verbose_name='区/县')城市 = models.ForeignKey('City', on_delete=models.PROTECT, null=True, blank=True, related_name='区县_城市',verbose_name='城市')class Meta:verbose_name_plural = verbose_name = '03-区/县'def __str__(self):return self.区县2. 在 view.py 中from django.http import JsonResponsefrom sjld.models import Province, City, District# Create your views here.# 省份def choose_province(request):省份 = Province.objects.all()result = []for i in 省份:result.append(i.省份) # 取公司的简称province = result # 传递⼀个列表return JsonResponse(province, safe=False)def choose_city(request):省份 = request.GET.get('p') # 取上⾯选中省份的名称城市 = City.objects.all()result = []for i in 城市:if str(省份) == str(i.省份):result.append(i.城市)cities = result # 传递⼀个列表return JsonResponse(cities, safe=False)def choose_district(request):城市 = request.GET.get('c') # 取上⾯选中城市的名称区县 = District.objects.all()result = []for i in 区县:if str(城市) == str(i.城市):result.append(i.区县)cities = result # 传递⼀个列表districts = citiesreturn JsonResponse(districts, safe=False)3. 在 urls.py 中from django.contrib import adminfrom django.urls import pathfrom sjld.views import choose_province, choose_city, choose_districturlpatterns = [path('admin/', admin.site.urls),path('province/', choose_province),path('city/', choose_city),path('district/', choose_district),]4. 在 admin.py 中from django import formsfrom django.contrib import adminfrom shanjld.models import Member, Province, City, Districtclass MemberForm(forms.ModelForm):class Meta:widgets = {'province': forms.Select(),'city': forms.Select(),'district': forms.Select()}# ⼈员@admin.register(Member)class MemberAdmin(admin.ModelAdmin):form = MemberFormchange_form_template = 'area.html'# raw_id_fields = ('province', 'city', 'district',) # 这个在这⾥就⽆效了,希望哪位⼤⽼指点⼀下,怎么重写这个⽅法.fields = ('name', 'province', 'city', 'district')list_display = ('name', 'province', 'city', 'district')# 省份@admin.register(Province)class ProvinceAdmin(admin.ModelAdmin):pass# 城市@admin.register(City)class CityAdmin(admin.ModelAdmin):raw_id_fields = ('省份',)# 区/县@admin.register(District)class DistrictAdmin(admin.ModelAdmin):raw_id_fields = ('城市',)5. 在项⽬ templates ⽂件下新建⼀个 area.html ⽂件6. 找到django源码中的 change_form.html ⽂件,打开复制⾥⾯全部的html内容到 area.html 中. (⽂件在 External Libraries => python3.7(我⽤的这个版本) => site-packages => django/contrib/admin/templates/admin/).7. 在 area.html ⽂件中找到 {% block admin_change_form_document_ready %} (在66⾏) , ⽤下⾯代码覆盖全部 {% block admin_change_form_document_ready %} .7.1 area.html 中所有增加替换代码{% block admin_change_form_document_ready %}<script type="text/javascript"id="django-admin-form-add-constants"src="{% static 'admin/js/change_form.js' %}"{% if adminform and add %}data-model-name="{{ opts.model_name }}"{% endif %}></script><script type="text/javascript">(function($) {$('#id_city').change(function() {let p_id = $('#id_province').val();let c_id = $('#id_city').val();$.get('/district/', {"p": p_id, "c": c_id }, function(a_info) {var area_info = $('#id_district').empty().append('<option value>' + '---------' + '</option>');$.each(a_info, function(i, area) {area_info.append('<option value="' + area + '">' + area + '</option>')});{% if change %}$("#id_district").find("option:contains({{ original.district }})").attr('selected', true);{% endif %}});});$('#id_province').change(function() {let p_id = $('#id_province').val();$.get('/city/', { 'p': p_id }, function(c_info) {var city_info = $('#id_city').empty().append('<option value>' + '---------' + '</option>');$.each(c_info, function(i, city) {city_info.append('<option value="' + city + '">' + city + '</option>')});{% if change %}$("#id_city").find("option:contains({{ original.city }})").attr('selected', true);$("#id_city").trigger("change");{% endif %}});});$.get('/province/', function(p_info) {var province_info = $('#id_province').empty().append('<option value>' + '---------' + '</option>');$.each(p_info, function(i, province) {province_info.append('<option value="' + province + '">' + province + '</option>')});{% if change %}$("#id_province").find("option:contains({{ original.province }})").attr('selected', true);$("#id_province").trigger("change");{% endif %}});})(django.jQuery);</script>{% endblock %}7.2 area.html 中所有代码{% extends "admin/base_site.html" %}{% load i18n admin_urls static admin_modify %}{% block extrahead %}{{ block.super }}<script type="text/javascript" src="{% url 'admin:jsi18n' %}"></script>{{ media }}{% endblock %}{% block extrastyle %}{{ block.super }}<link rel="stylesheet" type="text/css" href="{% static "admin/css/forms.css" %}">{% endblock %}{% block coltype %}colM{% endblock %}{% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} change-form{% endblock %}{% if not is_popup %}{% block breadcrumbs %}<div class="breadcrumbs"><a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>&rsaquo; <a href="{% url 'admin:app_list' app_label=opts.app_label %}">{{ opts.app_config.verbose_name }}</a>&rsaquo; {% if has_view_permission %}<a href="{% url opts|admin_urlname:'changelist' %}">{{ opts.verbose_name_plural|capfirst }}</a>{% else %}{{ opts.verbose_name_plural|capfirst }}{% endif %}&rsaquo; {% if add %}{% blocktrans with name=opts.verbose_name %}Add {{ name }}{% endblocktrans %}{% else %}{{ original|truncatewords:"18" }}{% endif %}</div>{% endblock %}{% endif %}{% block content %}<div id="content-main">{% block object-tools %}{% if change %}{% if not is_popup %}<ul class="object-tools">{% block object-tools-items %}{% change_form_object_tools %}{% endblock %}</ul>{% endif %}{% endif %}{% endblock %}<form {% if has_file_field %}enctype="multipart/form-data" {% endif %}action="{{ form_url }}" method="post" id="{{ opts.model_name }}_form" novalidate>{% csrf_token %}{% block form_top %}{% endblock %} <div>{% if is_popup %}<input type="hidden" name="{{ is_popup_var }}" value="1">{% endif %}{% if to_field %}<input type="hidden" name="{{ to_field_var }}" value="{{ to_field }}">{% endif %}{% if save_on_top %}{% block submit_buttons_top %}{% submit_row %}{% endblock %}{% endif %}{% if errors %}<p class="errornote">{% if errors|length == 1 %}{% trans "Please correct the error below." %}{% else %}{% trans "Please correct the errors below." %}{% endif %}</p>{{ adminform.form.non_field_errors }}{% endif %}{% block field_sets %}{% for fieldset in adminform %}{% include "admin/includes/fieldset.html" %}{% endfor %}{% endblock %}{% block after_field_sets %}{% endblock %}{% block inline_field_sets %}{% for inline_admin_formset in inline_admin_formsets %}{% include inline_admin_formset.opts.template %}{% endfor %}{% endblock %}{% block after_related_objects %}{% endblock %}{% block submit_buttons_bottom %}{% submit_row %}{% endblock %}{% block admin_change_form_document_ready %}<script type="text/javascript"id="django-admin-form-add-constants"src="{% static 'admin/js/change_form.js' %}"{% if adminform and add %}data-model-name="{{ opts.model_name }}"{% endif %}></script>{% endblock %}{# JavaScript for prepopulated fields #}{% prepopulated_fields_js %}</div></form></div>{% endblock %}8.效果9.访问admin出现问题:报错:UnicodeDecodeError: 'gbk' codec can't decode byte 0xa6 in position 9737: illegal multibyte sequence解决⽅法:。

省市区三级联动

省市区三级联动HTML<div class="am-form-content address"> <select name="province" id="province" onchange="loadRegion('province',2,'city');"><option value="0" selected>省份/直辖市</option>{volist name="province" id="vo"} <option value="{$vo.id}" >{$}</option>{/volist}</select><select name="city" id="city" onchange="loadRegion('city',3,'town');"><option value="0">市/县</option></select><select name="town" id="town"><option value="0">镇/区</option></select></div>⽅法public function address(){$where['uid']=cookie('id');$sql=db('ress')->field('a.*, as shengnamne, as shiname , as qname') ->where($where)->alias('a')->join('tree b','a.sheng=b.id')->join('tree c','a.shi=c.id')->join('tree d','a.qu=d.id')->select();// var_dump($sql);if($sql){$this->assign('sql',$sql);}else{$this->assign('sql','');}//三级联动上⾯与三级联动没关系$province = Db('tree')->where ( array('pid'=>1) )->select ();//进⼊页⾯直接查询省并赋值到页⾯ $this->assign('province',$province);return $this->fetch();}//三级联动public function getRegion(){$map['pid']=$_REQUEST["pid"];//查询⽗id$map['type']=$_REQUEST["type"];//查询那⼀级// $list=$Region->where($map)->select();$list = db('tree')->where($map)->select();// echo json_encode($list);return $list;}<script>function loadRegion(sel,type_id,selName,url="{:url('Index/getRegion')}"){jQuery("#"+selName+" option").each(function(){jQuery(this).remove();});// jQuery("<option value=0>请选择</option>").appendTo(jQuery("#"+selName));$('#'+selName).append('<option value=0>请选择</option>');if(jQuery("#"+sel).val()==0){return;}$.ajax({url:url,data:{pid:jQuery("#"+sel).val(),type:type_id},dataType:'json',type:'get',success:function(data){if(data){jQuery.each(data,function(idx,item){jQuery("<option value="+item.id+">"++"</option>").appendTo(jQuery("#"+selName)); });}else{jQuery("<option value='0'>请选择</option>").appendTo(jQuery("#"+selName));}}})jQuery.getJSON(url,{pid:jQuery("#"+sel).val(),type:type_id},function(data){if(data){jQuery.each(data,function(idx,item){jQuery("<option value="+item.id+">"++"</option>").appendTo(jQuery("#"+selName)); });}else{jQuery("<option value='0'>请选择</option>").appendTo(jQuery("#"+selName));}});}</script>数据库。

jquery+ajax实现省市区三级联动（封装和不封装两种方式）

jquery+ajax实现省市区三级联动（封装和不封装两种⽅式）⾸先，要实现如下图效果，1、要理清思路：先做出三个下拉菜单----根据第⼀个下拉菜单的value值获取第⼆个下拉列表的内容，第三个同理。

2、⽤到的数据库表：Chinastates表规律：根据国家级（中国）的areacode查询省级(如：北京) ; 根据省级的areacode查询市级（如：北京市辖）；根据市级的areacode查询区级（如东城区）第⼀种⽅式：没有⽤到封装，数据读取较慢，可以看看原理，这样在第⼆种⽅式封装时就容易多了。

代码如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="../jquery-1.11.2.min.js"></script></head><body><select id="sheng"></select><select id="shi"></select><select id="qu"></select></body></html><script type="text/javascript">$(document).ready(function(e){//输出省var code = "0001";$.ajax({async:false,//取消异步url:"chuli.php",data:{code:code},type:"POST",dataType:"TEXT",success:function(data){var hang = data.trim().split("|"); //trim()去空格var str="";for(var i=0;i<hang.length;i++){var lie = hang[i].split("^");str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";}$("#sheng").html(str);}});//输出市$("#sheng").click(function(){var code2=$("#sheng").val();$.ajax({async:false,url:"chuli.php",data:{code:code2},type:"POST",dataType:"TEXT",success:function(data2){var hang2 = data2.trim().split("|");var str2 ="";for(var i=0;i<hang2.length;i++){var lie2=hang2[i].split("^");str2 = str2 +"<option value ='"+lie2[0]+"'>"+lie2[1]+"</option>";}$("#shi").html(str2);}});})//输出区县$("#shi").click(function(){var code3=$("#shi").val();$.ajax({async:false,url:"chuli.php",data:{code:code3},type:"POST",dataType:"TEXT",success:function(data3){var hang3 = data3.split("|");var str3 ="";for(var i=0;i<hang3.length;i++){var lie3=hang3[i].split("^");str3 = str3 +"<option value ='"+lie3[0]+"'>"+lie3[1]+"</option>";}$("#qu").html(str3);}});})})</script> 期间出现的问题：每个下拉列表的第⼀个数据输不出来：是因为每个下拉列表的第⼀个数据的value值都带有空格所以在输出data时要去空格data返回的值可能带有空格换⾏等，所以要⽤trim()⽅法去空格第⼆种⽅式：封装成插件，以后可以随时调⽤（重要）（1）主页⾯：<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><br>//引⼊jquery包<script src="../jquery-1.11.2.min.js"></script><br>//引⽤我们⾃⼰封装的js⽂件<script src="sanji.js"></script></head><body><br>//id要与封装的js插件中⼀致<div id="sanji"></div></body></html>（2）我们⾃⼰封装的js插件$(document).ready(function(e){//扔三个下拉列表到主页⾯建的div中$("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"); //加载省的数据LoadSheng();//加载市的数据LoadShi();//加载区的数据LoadQu();//给省的下拉列表添加点击事件，当省变化时，对应的市和区会发⽣变化$("#sheng").click(function(){LoadShi();LoadQu();})//给市的下拉列表添加点击事件，当市变化时，对应的区发⽣变化$("#shi").click(function(){LoadQu();})});//加载省的下拉列表function LoadSheng() {var pcode = "0001";$.ajax({async: false,url: "chuli.php",data: { code: pcode },type: "POST",dataType: "TEXT",success: function(data) {var hang = data.trim().split("|");var str = "";for(var i = 0; i < hang.length; i++) {var lie = hang[i].split("^");str = str + "<option value='" + lie[0] + "'>" + lie[1] + "</option>";}$("#sheng").html(str);}});}//加载市省的下拉列表function LoadShi() {var pcode = $("#sheng").val();$.ajax({async: false,url: "chuli.php",data: { code: pcode },type: "POST",dataType: "TEXT",success: function(data) {var hang = data.trim().split("|");var str = "";for(var i = 0; i < hang.length; i++) {var lie = hang[i].split("^");str = str + "<option value = '" + lie[0] + "'>" + lie[1] + "</option>";}$("#shi").html(str);}});}//加载省的下拉列表function LoadQu() {var pcode = $("#shi").val();$.ajax({url: "chuli.php",data: { code: pcode },type: "POST",dataType: "TEXT",success: function(data) {var hang = data.trim().split("|");var str = "";for(var i = 0; i < hang.length; i++) {var lie = hang[i].split("^");str = str + "<option value = '" + lie[0] + "'>" + lie[1] + "</option>";}$("#qu").html(str);}});} 其次就是处理页⾯(两种⽅法都⽤到的)：chuli.php<?php$code=$_POST["code"];require "DB.class.php";$db=new DB();$sql="select areacode,areaname from chinastates where parentareacode='{$code}'";$str=$db->strquery($sql);echo $str;最后就是封装的类⽂件：DB.class.phpfunction strquery($sql){$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);$result = $db ->query($sql);$arr =$result->fetch_all();$str="";foreach($arr as $v){$str=$str.implode("^",$v)."|";}$str = substr($str,0,strlen($str)-1);return $str;}}>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

DWR高级主题之反向Ajax(DWR3介绍)

DWR高级主题之反向Ajax(DWR3介绍)DWR高级主题之反向Ajax(DWR3介绍)分类：DWR2011-12-23 14:171850人阅读评论(3)收藏举报DWR高级主题之反向Ajax(DWR3介绍)----------我们在前面使用的DWR主要是基于DWR2.X版本的，这里我们针对DWR3进行介绍,介绍一些提示或技巧。

1. ScriptSession生命周期(创建ScriptSession以及让ScriptSession失效)当/dwr/engine.js被包含进页面时ScriptSessions就创建了。

默认情况下，ScriptSessions的生命周期由org.directwebremoting.impl.DefaultScriptSessionManager维护。

如果你调用下面这个javascript方法：[html] view plaincopy?dwr.engine.setNotifyServerOnPageUnload(true); 当页面被卸载(比如强制刷新页面,卸载再加载)时,将对ScriptSessionManager发出一个远程的DWR调用，通知它让ScriptSession失效。

DWR通过这个默认的同步调用，可以很好地让ScriptSession失效。

关闭浏览器时，此同步调用可能会导致延迟。

如果不喜欢，你可以传递第二个参数给dwr.engine.setNotifyServerOnPageUnload：[html] view plaincopy?dwr.engine.setNotifyServerOnPageUnload(true, true); 第二个可选参数告诉DWR调用异步卸载器。

注意：在DWR2.X中，页面每刷新一次会多创建一个新的ScriptSession，使用上面的方式可以有效解决这个问题。

由于ScriptSession的创建机制不同于HttpSession，它会在每次页面刷新的时候都会重新创建，而销毁机制却是失去连接或者失效之后一定时间才会自动销毁，这样就可能造成服务端可能就保存了很多的无用的ScriptSession,所以不仅仅会影响性能问题，更重要的是，可能就不能实现你想要的功能。

javascript省市区三级联动下拉框菜单实例演示

javascript省市区三级联动下拉框菜单实例演⽰本⽂实例讲述了javascript实现省市区三级联动下拉框菜单代码，像平时购物选择地址时⼀样，通过选择的省动态加载城市列表，通过选择的城市动态加载县区列表，从⽽可以实现省市县的三级联动，下⾯使⽤原⽣的JavaScript来实现这个功能，分享给⼤家供⼤家参考。

具体如下：运⾏效果截图如下：具体代码如下：<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>三级联动测试</title><script src="jquery-2.1.4.min.js"></script><script type="text/javascript">//⽤来获得option元素中selected属性为true的元素的idfunction Get_Selected_Id(place){var pro = document.getElementById(place);var Selected_Id = pro.options[pro.selectedIndex].id;return Selected_Id; //返回selected属性为true的元素的id}//改变下⼀个级联的option元素的内容，即加载市或县function Get_Next_Place(This_Place_ID,Action){var Selected_Id = Get_Selected_Id(This_Place_ID); //Selected_Id⽤来记录当前被选中的省或市的IDif(Action=='Get_city') //从⽽可以在下⼀个级联中加载相应的市或县Add_city(Selected_Id);else if(Action=='Get_country')Add_country(Selected_Id);}//⽤来存储省市区的数据结构var Place_dict = {"GuangDong":{"GuangZhou":["PanYu","HuangPu","TianHe"],"QingYuan":["QingCheng","YingDe","LianShan"],"FoShan":["NanHai","ShunDe","SanShui"]},"ShanDong":{"JiNan":["LiXia","ShiZhong","TianQiao"],"QingDao":["ShiNan","HuangDao","JiaoZhou"]},"HuNan":{"ChangSha":["KaiFu","YuHua","WangCheng"],"ChenZhou":["BeiHu","SuXian","YongXian"]}};//加载城市选项function Add_city(Province_Selected_Id){$("#city").empty();$("#city").append("<option>City</option>");$("#country").empty();$("#country").append("<option>Country</option>");//上⾯的两次清空与两次添加是为了保持级联的⼀致性var province_dict = Place_dict[Province_Selected_Id]; //获得⼀个省的字典for(city in province_dict){ //取得省的字典中的城市//添加内容的同时在option标签中添加对应的城市IDvar text = "<option"+" id='"+city+"'>"+city+"</option>";$("#city").append(text);console.log(text); //⽤来观察⽣成的text数据}}//加载县区选项function Add_country(City_Selected_Id){$("#country").empty();$("#country").append("<option>Country</option>");//上⾯的清空与添加是为了保持级联的⼀致性var Province_Selected_ID = Get_Selected_Id("province"); //获得被选中省的ID，从⽽⽅便在字典中加载数据var country_list = Place_dict[Province_Selected_ID][City_Selected_Id]; //获得城市列表for(index in country_list){////添加内容的同时在option标签中添加对应的县区IDvar text = "<option"+" id=\'"+country_list[index]+"\'>"+country_list[index]+"</option>";$("#country").append(text);console.log(text); //⽤来观察⽣成的text数据}}</script></head><body><p>您的收货地址：</p><select id="province" onchange="Get_Next_Place('province','Get_city')"><option id="Not_data1">Province</option><option id="GuangDong" value="GuangDong">GuangDong</option><option id="ShanDong" value="ShanDong">ShanDong</option><option id="HuNan" value="HuNan">HuNan</option></select><select id="city" onchange="Get_Next_Place('city','Get_country')"><option id="Not_data2">City</option></select><select id="country"><option id="Not_data3">Country</option></select><br/></body></html>如果⼤家还想深⼊学习，可以点击、进⾏学习。

AJAX实现省市县三级联动效果

AJAX实现省市县三级联动效果最近在学AJAX做到这个省市县三级联动的案例，这⾥只是讲⼀下ajax请求的⼀些知识，对服务端数据.php⽂件就不叙述了。

（tips:其实省市县三级联动只需要引⼊jQuery省市县三级联动插件就可以实现）效果图⾸先准备两个服务端⽂件，另⼀个⽂件太长，这⾥就不导⼊了selsect.php<?php/*省市县后台数据接⼝接⼝调⽤规则：1.参数⼀：flag，⽤来区分请求的是省市县中间的那种数据2.参数⼆:选择省的时候传递pid，选择市的时候传递cIdhttp://localhost/select.php?flag=1#pId=23*/// include('./selectdata.php');require('./selectdata.php');// 省市县数据来⾃selectdata.php⽂件$province = $provinceJson;$city = $cityJson;$county = $countyJson;$flag = $_GET['flag'];// 省级数据if($flag == 1){echo json_encode($province);// 市级数据}else if($flag == 2){$pId = $_GET['pId'];$cityData = array();foreach ($city as $value) {if($value->id == $pId){// 直辖市array_push($cityData,$value);break;}else if($value->parent == $pId){// ⾮直辖市array_push($cityData,$value);}}echo json_encode($cityData);// 县级数据}else if($flag == 3){$cId = $_GET['cId'];$countyData = array();foreach ($county as $value) {if($value->parent == $cId){array_push($countyData,$value);}}echo json_encode($countyData);}>select.html这⾥可以⽤底层ajax 请求，也可以⽤快捷⽅法 $.get ⽅法进⾏数据请求。

史上最强省市县三级联动菜单(附源码详解)

注册时一般都有选择自己的籍贯或家庭地址这一项，最近几天也为了这个纠结了几天，总结了一下，在这里写了一个小例子，源代码都有，步骤也写的很详细了，希望对大家有点帮助！
学习交流QQ：1134135987
我的项目结构是
项目运行后是这样的：
点击“注册”按钮后的效果为：
这样就OK了，这只是一个小例子而已，在实际的的项目中，就可以在后台接收这个三个值了，然后保存到数据库中，这里就不做详细介绍了。

以下是源代码：
showCity.jsp里面的代码：
city.js里面的代码：
getCity.js里面的代码：。

省市县三级联动

Ajax+JS+Xml无刷新省市县三级联动（使用母版页，修改个人信息）前言：这是我第一次做省市县三级联动，所以体会很深就把我所遇到的情况给总结了一下，仅供大家参考！（其中，有许多资料是我从网上下载的。

）要想无刷新我们的配置ajax所以在web.config中添加ajax的配置：<system.web><httpHandlers><add verb="POST,GET"path="ajax/*.ashx"type="Ajax.PageHandlerFactory, Ajax" /> </httpHandlers></system.web>首先：我们在页面放三个DropDownList控件<asp:DropDownList ID="DropDownList1"runat="server"Height="20px"Width="60px"Font-Size="12px"></asp:DropDownList><asp:DropDownList ID="DropDownList2"runat="server"Height="20px"Width="60px"Font-Size="12px"></asp:DropDownList><asp:DropDownList ID="DropDownList3"runat="server"Height="20px"Width="60px"Font-Size="12px"></asp:DropDownList>然后再添加三个Lable控件，这是为了接收dropdownlist控件中的值<input id="lbl_provice_id"type="text"runat="server"style="display :none ;" name="lbl_provice_id"/><input id="lbl_provice"type="text"runat="server"style="DISPLAY: none"value=""/><input id="lbl_city"type="text"runat="server"style="DISPLAY: none"value=""/><input id="lbl_area"type="text"runat="server"style="DISPLAY: none"/>然后再在页面的源码中的page中添加enableEventValidation="false"这样就可以解决回调会回调函数无效这个错误。

jQueryajax实现省市县三级联动

jQueryajax实现省市县三级联动本⽂我们⽤Jquery，ajax,做⼀个省，市，县的三级联动：下⾯是我做三级联动下拉的步骤以及逻辑第⼀步：先做⼀个省市区表格第⼆步：建个PHP页⾯显⽰⽤我是在<body>⾥放<div>⽤来接收要显⽰的省市区表格信息，⾥⾯嵌⼊jquery-1.11.2.min.js和⾃⼰封装的三联动省市区的⽅法第三步：写封装⽅法⽤JS第四步：做个纯php处理页⾯，这个页⾯处理传过来的任何代号⾸先我们要建⽴数据库：这就是包含省，市，县的数据库。

下⾯我们就写主页⾯：sanji.php：<!doctype html><html lang="en"><head><meta charset="UTF-8" /><title>Document</title><script src="jquery-1.11.2.min.js"></script><script src="sanjiliandong.js"></script></head><body><div id="sanjiliandong"></div></body></html>然后就是js⽂件：// JavaScript Document$(document).ready(function(e){//向div⾥⾯仍三个下拉var str = "<select id='sheng'></select><select id='shi'></select><select id='qu'></select>";$("#sanjiliandong").html(str);//三个下拉显⽰//当省选中的话市也会跟着变去也会变。

Ajax之DWR介绍

DWR的安装与使用（二）
页面引入js
dwr/engine.js dwr/util.js dwr/interface/*.js
在dwr.xml中配置使用到的java类
1. 2.
3.
在allow中配置需要调用的java类为create；在allow中配置调用的java方法参数和返回值涉及的类（包括集合类中的元素类型,自定义类的属性类型）为convert； Jdk1.4以下中如果调用的java方法参数为集合类型则还应在配置signatures以指定集合中的元素类型。
为什么使用Ajax
增强页面交互性改善用户体验通过局部刷新页面减轻网络负担减少开发工作量
返回
DWR简介
DWR是实现Ajax的一个开源库
1. 2.
目前新版本是2.0.2 DWR1.x和2.0之间差异比较大,包括其核心及附带的工具包
DWR让页面调用运行在服务器端的Java 代码就像调用在浏览器里的js一样
Ajax之DWR 使用介绍
Ajax简介
什么是Ajax Ajax能做什么 Ajax怎么做到的为什么使用Ajax
什么是Ajax
AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。
实例:执行删除操作(页面js)
<script src='<%=rootpath%>/dwr/interface/RackAjax.js' type="text/javascript"></script>

Ajax商品分类三级联动的简单实现（案例）

Ajax商品分类三级联动的简单实现（案例）思路分析：效果：当页⾯加载时，利⽤ajax异步向后台请求数据，加载⼀级商品类别，当选择⼀级商品时加载⼆级商品，选择⼆级商品加载三级商品。

实现：1、当拿到数据后加载pid为0的商品，并动态创建option将商品追加到⼀级菜单中，并设置value值2、当选择⼀级商品时加载pid=当前id的商品，并创建option将商品追加到⼆级菜单中，并设置value值3、当选择⼆级商品时加载pid=当前id的商品，并创建option将商品追加到三级菜单中，并设置value值页⾯效果：$(function(){//请求路径var url="03goods.php";//option默认内容var option="<option value='0'>未选择</option>";//获取jq对象var $sel1=$(".sel1");var $sel2=$(".sel2");var $sel3=$(".sel3");//⾃动⽣成⼀个<option>元素function createOption(value,text){var $option=$("<option></option>");$option.attr("value",value);$option.text(text);return $option;}//加载数据function ajaxSelect($select,id){//get请求$.get(url,{"pid":id},function(data){$select.html(option);for(var k in data ){$select.append(createOption(data[k].id,data[k].name));}},"json");}//⾃动加载第⼀个下拉菜单ajaxSelect($sel1,"0");//选择第⼀个下拉菜单时加载第⼆个$sel1.change(function(){var id=$sel1.val();if(id=="0"){$sel2.html(option);$sel3.html(option);}else{ajaxSelect($sel2,id);}});//选择第⼆个下拉菜单时加载第三个$sel2.change(function(){var $id=$sel2.val();if($id=="0"){$sel3.html(option);}else{ajaxSelect($sel3,$id);}});});后台代码：<?phpheader('Content-Type:text/html; charset=utf-8');//数据$arr=array(//array(分类id,分类名，分类的⽗id)array('id'=>'1','name'=>'数码产品','pid'=>'0'),array('id'=>'2','name'=>'家电','pid'=>'0'),array('id'=>'3','name'=>'书籍','pid'=>'0'),array('id'=>'4','name'=>'服装','pid'=>'0'),array('id'=>'5','name'=>'⼿机','pid'=>'1'),array('id'=>'6','name'=>'笔记本','pid'=>'1'),array('id'=>'7','name'=>'平板电脑','pid'=>'1'),array('id'=>'8','name'=>'智能⼿机','pid'=>'5'),array('id'=>'9','name'=>'功能机','pid'=>'5'),array('id'=>'10','name'=>'电视机','pid'=>'2'),array('id'=>'11','name'=>'电冰箱','pid'=>'2'),array('id'=>'12','name'=>'智能电视','pid'=>'10'),array('id'=>'13','name'=>'编程书籍','pid'=>'3'),array('id'=>'14','name'=>'JavaScript','pid'=>'13'),);//获取指定分类的商品function getByPid($arr,$pid){$result=array();foreach($arr as $v){if($v['pid']==$pid){$result[]=$v;}}return $result;}//获取请求参数$pid=isset($_GET['pid'])?$_GET['pid']:'0';$result=getByPid($arr,$pid);//输出json数据echo json_encode($result);>以上这篇Ajax商品分类三级联动的简单实现(案例)就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

Ajax实现省市区三级联动实例代码

Ajax实现省市区三级联动实例代码html代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>省市区三级联动</title><link rel="stylesheet" href="./assets/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" /><style type='text/css'>.container{padding-top: 150px;}</style></head><body><div class='container'><div class="form-inline"><div class="form-group"><select type="text" class="form-control" id="province"></select></div><div class="form-group"><select type="text" class="form-control" id="city"><option>请选择城市</option></select></div><div class="form-group"><select type="text" class="form-control" id="area"><option>请选择县区</option></select></div></div></div><script src="./js/ajax.js"> </script><script src="./js/template-web.js"></script><script type="text/html" id="provinceTpl"><option>请选择省份</option>{{each province}}<option value="{{$value.id}}">{{$}}</option>{{/each}}</script><script type="text/html" id="cityTpl"><option>请选择城市</option>{{each city}}<option value="{{$value.id}}">{{$}}</option>{{/each}}</script><script type="text/html" id="areaTpl"><option>请选择县区</option>{{each area}}<option value="{{$value.id}}">{{$}}</option>{{/each}}</script><script>//获取省市区下拉元素var province=document.getElementById('province');var city=document.getElementById('city');var area=document.getElementById('area');//1.获取省份信息ajax({type:'get',url:'http://localhost:3000/province',success:function(data){// console.log(data);//将服务器端返回的数据和html进⾏拼接// 第⼀个参数为模板id,第⼆个参数为服务器返回的数据var html = template('provinceTpl',{province:data});//province为上⾯的each对象，必须⼀致 // console.log(html);//将拼接好的字符串html显⽰到页⾯中province.innerHTML=html;}});//为省份的下拉框添加值改变事件province.onchange=function(){//获取省份的idvar pid=this.value;//清空县区下拉框中的数据var html=template('areaTpl',{area:[]});area.innerHTML=html;//根据省份id获取城市信息ajax({type:'get',url:'http://localhost:3000/cities',data:{id:pid},success:function(data){// console.log(data);var html = template('cityTpl',{city:data});city.innerHTML=html;}});}//为市的下拉框添加值改变时事件city.onchange=function(){//获取城市idvar cid=this.value;//根据城市id获取县区idajax({type:'get',url:'http://localhost:3000/areas',data:{id:cid},success:function(data){var html=template('areaTpl',{area:data});area.innerHTML=html;}});}</script></body></html>Ajax封装⽅法：function ajax(options){//定义默认var defaults ={type:'get',url:'',data:{},Headers:{'Content-Type': 'application/x-www-form-urlencoded'},success:function(){},error:function(){}};//⽤options中的对象覆盖defaults中对象Object.assign(defaults,options);//创建var xhr= new XMLHttpRequest();//拼接请求参数变量var params='';//循环⽤户传递进来的对象格式参数for(var attr in defaults.data){//将参数转换成字符串格式params+= attr +'='+ defaults.data[attr] +'&';}//字符串截取，将最后的&截取掉params= params.substr(0,params.length -1);//判断请求⽅式if(defaults.type=='get'){defaults.url=defaults.url +'?'+ params;}//配置xhr.open(defaults.type,defaults.url);//发送请求if(defaults.type=='post'){//⽤户期望的向服务端传递的请求参数类型var contentType=defaults.Headers['Content-Type'];//post请求时必须设置的xhr.setRequestHeader('Content-Type',contentType);//判断请求参数类型if(contentType=='application/json'){xhr.send(JSON.stringify(defaults.data));}else{xhr.send(JSON.stringify(params));}}else{xhr.send();}//监听onload事件,当接收完响应数据后触发xhr.onload=function(){//xhr.getResponseHeader()//获取响应头部数据var contentType=xhr.getResponseHeader('Content-Type');//服务端返回的数据var responseText=xhr.responseText;if(contentType.includes('application/json')){//把JSON字符串转换为JSON 对象responseText = JSON.parse(responseText);}//对http状态码判断，判断是否等于200if(xhr.status==200){//调⽤处理成功情况的函数defaults.success(responseText,xhr);}else{//调⽤处理失败的情况函数defaults.error(responseText,xhr);}}}服务器端测试代码：/**** server.js ****/// ⼀个简单的后端路由//1.引⼊express框架const express=require('express');const fs=require('fs');//2.引⼊路径处理模块const path=require('path');const bodyParser=require('body-parser');//post//3.创建web服务器const app=express();//post//extended:返回的对象是⼀个键值对，当extended为false的时候，键值对中的值就为'String'或'Array'形式，为true的时候，则可为任何数据类型。

三级联动步骤

三级联动地址一．添加文件①将hat_province(省),hat_city（市）, hat_area（区县）导入数据库。

②在js文件中引入cms.js。

③CMSService直接粘贴到.cxsw.service中即可，不用修改。

④GetAreaServlet.GetCityServlet,GetProvinceServlet粘贴到.cxsw.servlet中（cms.js会使用到servlet）。

二．添加地址一栏（add.jsp）①回显省市县<script src="<%=request.getContextPath()%>/js/cms.js"></script>②页面一加载就显示省市县<body onload="getProvince()">③添加下拉菜单--地址<label>地址</label><label>省</label><selectid="province"name="province" onchange="getCity(this.value)"><option value="-1">请选择省份</option></select><label>市</label><select id="city"name="city" onchange="getCountry(this.value)"><option value="-1">请选择市</option></select><label>县: </label><select id="country" name="country"><option value="-1">请选择县</option></select>三．取地址（addServlet）①addServlet：DoGet():String province_id = request.getParameter("province");String city_id = request.getParameter("city");String country_id = request.getParameter("country");CMSService cmsService = new CMSService();String provinceName=cmsService.getProvinceName(province_id);String cityName=cmsService.getCityName(city_id);String countryName=cmsService.getCountryName(country_id);String address = provinceName+"-"+cityName+"-"+countryName;System.out.println("测试address:" + address);//测试成功知后删除该语句地址没有什么特殊之处，同“姓名”一样将address存储到Model，处理业务，响应即可。

JQuery教程实例-Ajax三级省市联动菜单

JQuery教程实例-Ajax三级省市联动菜单1，目录结构这个实例的文件目录结构如下图所示。

其中，ajax.sql是数据库文件，data.php是处理ajax请求的php文件，droplist.js是页面效果处理文件，index.php是显示页面。

在进行下一步之前，我们先将ajax.sql导入到mysql数据库中。

2，index.php 文件主要是在页面刚打开时，显示默认的省的信息。

这里不再赘述，代码如下：1<html>2<head>3<meta http-equiv="Content-Type"content="text/html;charset=utf-8"/>4<script type="text/javascript"src="jquery-1.3.2.min.js"></script>5<script type="text/javascript"src="droplist.js"></script>6</head>7<body>8<div align="center"style="margin-top:200px;">9<?php10$conn=mysql_connect("localhost","root","");11mysql_select_db("novel");12mysql_query("set names'utf8'");13$sql="select*from province";14$result=mysql_query($sql);15echo"<from id='droplist'>\n";16echo"<select name='province'>\n";17echo"<option value='-1'selected>请选择省份</option>\n";18while($row=mysql_fetch_row($result)){19echo"<option value='$row[1]'>$row[2]</option>\n";20}21echo"</select>\n";22echo"<select name='selectCity'></select>\n";23echo"<select name='area'></select>\n";24echo"</form>\n";25?>26</div>27</body>28</html>3，droplist.js文件主要是实现了ajax的请求和相应的页面显示效果的处理，比如：其中自定义了ajaxSelectArea()和ajaxSelectCity()两个函数发送ajax请求，这两个函数里面用到的$.ajax()是jquery 框架中ajax的底层实现。