ajax实现地址三级联

最新推荐文章于 2019-02-15 09:20:38 发布
最新推荐文章于 2019-02-15 09:20:38 发布
阅读量447 收藏
点赞数
分类专栏： ajax java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lixiyuyu/article/details/52292515
版权
java 同时被 2 个专栏收录
7 篇文章 0 订阅
订阅专栏
ajax
1 篇文章 0 订阅
订阅专栏

Address.java

import java.sql.Connection;

import java.sql.PreparedStatement;

import java.sql.ResultSet;

 

publicclass Address{

       DbUtil8 d=new DbUtil8();

      

       public List<Province> getProvince(){

             

                String sql = "select province_id,province from tm_province ";

                     Connectionconn=null;

                     PreparedStatementpstm=null;

                     ResultSetrs=null;

              List<Province> addList =newArrayList<Province>();

                     conn=d.getConnection();

                    

             try {

                   pstm=conn.prepareStatement(sql);

                    

                            rs=pstm.executeQuery();

                           

                            while (rs!=null&&rs.next()){

                            Provincepro=newProvince();

                            pro.setProvince_id(rs.getString("province_id"));

                            pro.setProvince(rs.getString("province"));

                           

                              addList.add(pro);

                              System.out.println("调用findByName方法");

                             

                     }

             }catch(SQLException e) {

                            //TODOAuto-generated catch block

                            e.printStackTrace();

                     }finally{

                            d.close(null, pstm,conn);

                     }

              returnaddList;

             

       }

      

       public List<HashMap<String, Object>>  getCity(String province_id){

             

                String sql = "select city_id, cityfrom tm_city where province_id=? ";

                     Connectionconn=null;

                     PreparedStatementpstm=null;

                     ResultSetrs=null;

          //   List<City> addList = new ArrayList<City>();

                     List<HashMap<String,Object>> maps =null;

                     conn=d.getConnection();

                     Citycity=new City();

             try {

                   maps = newArrayList<HashMap<String,Object>>();

                   pstm=conn.prepareStatement(sql);

                        pstm.setString(1,province_id);   //!!!!!!!!!!!!!!!!!!!!!!!!!!

                            rs=pstm.executeQuery();

                            HashMap<String,Object> map =null;

                            while (rs!=null&&rs.next()){

                                   map= newHashMap<String, Object>();

                                   map.put("id",rs.getString("city_id"));

                                   map.put("name",rs.getString("city"));

                                   maps.add(map);

                     }

             }catch(SQLException e) {

                            //TODOAuto-generated catch block

                            e.printStackTrace();

                     }finally{

                            d.close(null, pstm,conn);

                     }

            return maps;

             

       }

      

}

 

 

 

Address.jsp

<%@ page language="java"contentType="text/html;charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@  page import="com.test.bean.*,java.util.*"%>

<%@ taglib prefix="c"uri="http://java.sun.com/jsp/jstl/core"%>

<c:setvar="ctx"value="${pageContext.request.contextPath}"/>

<!DOCTYPEhtml PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<scripttype="text/javascript"src="js/jquery-1.11.1.min.js"></script>

</head>

<body>

<%   Address address=new Address();

List<Province> list=address.getProvince();

request.setAttribute("province", list);

 

%>

              <select  id="province"onchange=" selectPro(this)">

                  <option value="">-请选择-</option>

                        <c:forEach var="pv"items="${province}">

                                       <optionvalue="${pv.province_id}">${pv.province}</option>

                            </c:forEach>

              </select>省

             

              <select  id="city"onchange=" selectCity(this)">

                  <option value="">-请选择-</option>

              </select>市

             

              <select  id="area">

                  <option value="">-请选择-</option>

              </select>县

 

<scripttype="text/javascript">

   function selectPro(obj){

          var provinceId=$(obj).val();

          alert(provinceId);

          if(!provinceId)return;// 声明变量就要判断是否为null

          $.ajax({

                 type:"post",

                 url:"${ctx}/CityServlet",

                 data:{"provinceId":provinceId},

                 success:function(data){

                        var data1=data.trim();

                        if(data1=="fail"){

                               alert("查询失败");

                        }else{

                               alert(data1);

                               var jsonData=eval(data1);

      

                               append_template(jsonData,"city");

                              

                     …

  

       functionappend_template(jsonData,target){

              var length= jsonData.length;

              var html ="<option>-请选择-</option>";

              for(vari=0;i<length;i++){

                     html+="<optionvalue='"+jsonData[i].id+"'>"+jsonData[i].name+"</option>";

              }

              $("#"+target).html(html);

       };

</script>

</body>

</html>

 

 

 

Servlet

String provinceId =request.getParameter("provinceId");

               

               System.out.println(provinceId);

               if(provinceId!=null&&!provinceId.equals("")){

              //   List<City> list=newAddress().getCity(provinceId);

                            List<HashMap<String,Object>> citys=newAddress().getCity(provinceId);

                    

                            try {

                                   response.setContentType("text/html;charset=UTF-8");

                                response.setCharacterEncoding("utf-8");

                                   response.getWriter().print(JSONUtil.serialize(citys));

                                    

                            }catch(JSONException e) {

                           

                                   e.printStackTrace();

                            }

              //   response.getWriter().print(JSONArray.fromObject(list));

               }else{

                      response.getWriter().print("fail");

               }


源码地址：http://download.csdn.net/detail/lixiyuyu/9610732

lixiyuyu
关注
专栏目录
ajax实现三级联动查询
weixin_45534213的博客
09-20 425
使用SSM框架实现三级联动功能 展示效果 数据库表结构（parentId是关键） 接口 //查询某类别下面的子类(通过parentId,不传参数时为null，查询一级类别) List<AppCategory> getAppCategoryData(Long parentId); 实现接口 @Service("appCategoryService") public class AppCategoryServiceImpl implements AppCategoryService
jquery多级联动(ajax查数据库)
11-07 137
/id 代表下级下拉框ID,cityCode代表的是父级菜单代码,所有级菜单在同一张表,后台在加载是把菜单已经加入到Map缓存中.... 1 //id 代表下级下拉框ID,cityCode代表的是父级菜单代码,所有级菜单在同一张表, 2 function getCitys(cityCode,id){ 3 $("#"+id+" option:gt(0...
Ajax案例：三级联动查询员工的信息(三张表进行内连接)
weixin_30639719的博客
09-11 206
　　需求分析： 　　通过数据库连接池，可以查询到数据库中员工的各种信息，通过点击下拉框的方式实现三级联动，即：没有点击city下拉框，后面两个下拉框中没有值，这样，点击city下拉框，department下拉框中才有值，点击department下拉框后employee下拉框中才有值，才可以进行选择，不可以跨级点击；点击最后一个下拉框可以将员工的id，last_name，email，salary，...
Ajax-JS实现地址三级联动
Boogie
05-07 1144
使用了Gson和JSON解析jar包。使用了全国省市县区的数据库。 具体项目案例：点我下载 前台页面简单展示：<div class="xl-dz"> 省份： <select name="province" id="province" onchange="onSelectChange(this,'city');"> </select> <br /> 城市： <select name="ci
Ajax实现省市区三级级联(数据来自mysql数据库)
12-11
实现Ajax实现省市区三级级联，需要Java解析json技术 整体Demo下载地址如下: 点我下载 address.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here&...
利用了jquery的ajax实现二级联互动菜单
10-26
在本文中，我们将深入探讨如何使用jQuery的Ajax功能来实现二级联动菜单。这种交互式菜单在网站中很常见，特别是在需要根据用户在一个下拉列表中的选择动态更新另一个下拉列表时。下面，我们将分析给定的代码片段，...
jQuery+ajax实现三级级联
11-23
在这个“jQuery+ajax实现三级级联”的实例中，我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统，这在数据筛选和表单填写中十分常见，如地区选择、部门分类等场景。 首先，jQuery是一个轻量级...
java+Ajax实现省市地三级联动
09-17
"java+Ajax实现省市地三级联动"就是一个典型的案例，它利用了Java、Ajax、JSON、Servlet和JavaScript等技术，来构建一个动态的下拉选择框，使得用户在选择省之后，市和地级行政区划会根据所选的省自动更新。...
使用jQuery和Ajax自动填充选择框（select）
Gemini_llw的博客
08-01 8643
前言：大家好，我是一名正在实习的前端实习生，今天在做项目的时候，遇到了一个没有遇到过的问题，就是从后台获取到的数据要自动填充到选择框内，并且选择框是个select级联（一个选择框改变，另一个也会改变，类似在淘宝买东西时的地址选择框）。 类似这种效果： select级联遇到过，但是从后台获取数据处理select级联还是第一次。 找了篇优质的教程给萌新小白们（包括我）。 原址：https://
AJAX 教程
weixin_30321449的博客
05-15 159
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。 AJAX 实例 使用 AJAX 修改该文...
Jquery+Ajax实现3级联动
风泊月
02-07 1396
1.需要将省市县这些地区的数据表导入到数据库内，已经添加到附件可以查看2.这是一个成型的demo，界面非常简单 select组件即可3.准备后台数据，这里用到了Gson(),有兴趣也可以了解一下fastJson()更快更方便的处理Json数据4.关键代码//设置响应编码格式 resp.setContentType("text/html;charset=utf-8"); resp.set...
ajax省市区三级联动
热门推荐
ITDragon博客
12-16 1万+
jdbc+servlet+ajax开发省市区三级联动 技术点：jdbc操作数据库，ajax提交，字符拦截器，三级联动 特点：局部刷新达到省市区三级联动，举一反三可以做商品分类等 宗旨：从实战中学习
java+ajax实现web目录树
JeelonXu.feng
12-14 1万+
这是我今天做的java+ajax实现的目录树 做了一天 终于弄出来了 死了好多脑细胞，不容易啊 ，开始在网上找了好多资料，本人愚拙没用一个弄清楚了，无奈之下，只有自己动手丰衣足食。 开始的时候我没用考虑到性能，所以用到了java递归的方式，架上项目数据库后测试才发现，速度慢的惊人（共几万条数据）。需要点击父目录后才查询显示父目录下面的子目录。所以不得不改变方针。 我用到js 递归生成div
OCR读取身份证地址字符串切割成省、市、区
Alex_夜羽的博客
02-15 5472
1：OCR读取出来的身份证地址字符串切割为省、市、区/县、详细地址 2：切割工具：   public class AddressSubUtils { /** * 切割地址字符串 * @param addr * @return */ public static Map&lt;String,Object&gt; getAddress(Stri...
javax.servlet.jsp.JspTagException] with root cause
黎黎的博客
08-09 5530
报错javax.servlet.jsp.JspTagExceptionat org.apache.taglibs.standard.tag.common.core.SetSupport.doEndTag(SetSupport.java:216)at org.apache.jsp.NewFile_jsp._jspx_meth_c_005fset_005f1(NewFile_jsp.java:17
导入工程的各种错误
黎黎的博客
08-11 607
jsp页面 Multiple annotations found at this line:     - The superclass "javax.servlet.http.HttpServlet" was not found on the Java     解决步骤： 1、右键项目-build path 2、选择configure build p
使用Ajax实现三级联动下拉菜单教程
"ajax三级联动下拉菜单效果的实现及步骤" 在网页开发中，Ajax 三级联动下拉菜单是一种常见的交互设计，主要用于地理区域选择或其他层级结构的筛选。这种效果能够提供流畅的用户体验，无需刷新整个页面就能更新下级...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值