三级联动怎么回显 javaweb

Posted 2023-04-26

以省，市，城联动为例：
此小程序的功能主要是采用异步请求方式从数据库中调取省市区信息显示到下拉列表：
代码如下：
建立数据库中的代码和一些配置文件信息就省略了，主要有javascript中的代码为：
$(document).ready(function()
$.get("getProvince.do", function(result)
$("#showp").html(result);
);
)
var xmlhttp;
function mysend(str)
$(document).ready(function()
$("#show2").html("");
)
var show = document.getElementByIdx_x_x_x_x_x_x_x_x_x("show");
show.innerHTML = "";

var province = document.getElementByIdx_x_x_x_x_x_x_x_x_x("province").value;
if(province!=0)

if(window.XMLHttpRequest)
xmlhttp = new XMLHttpRequest();
else
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");


xmlhttp.onreadystatechange=function()
if(xmlhttp.readyState==4 && xmlhttp.status==200)

show.innerHTML = xmlhttp.responseText;



var ss = encodeURIComponent(str);
xmlhttp.open("GET","getCity.do?provinceid="+ss,true);
xmlhttp.send(null);




function myarea(str)

if(window.XMLHttpRequest)
xmlhttp = new XMLHttpRequest();
else
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");


xmlhttp.onreadystatechange=function()
if(xmlhttp.readyState==4 && xmlhttp.status==200)
var show2 = document.getElementByIdx_x_x_x_x_x_x_x_x_x("show2");
show2.innerHTML = xmlhttp.responseText;



var ss = encodeURIComponent(str);
xmlhttp.open("GET","getArea.do?cityid="+ss,true);
xmlhttp.send(null);

html页面中的代码为：

所在地

action中的代码为：
package mobi.zhangsheng.jiejia.action;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import org.springframework.stereotype.Controller;
import mobi.zhangsheng.jiejia.domain.Areas;
import mobi.zhangsheng.jiejia.service.AgentsService;
import mobi.zhangsheng.jiejia.service.AreasService;
@Controller
public class ProvinceAction

private int provinceid;
private int cityid;
@Resource
private AreasService as;
@Resource
private AgentsService ags;

public int getProvinceid()
return provinceid;

public void setProvinceid(int provinceid)
this.provinceid = provinceid;

public int getCityid()
return cityid;

public void setCityid(int cityid)
this.cityid = cityid;


public void getProvince()
List provinceList = as.getAreasPrvinceList();
HttpServletResponse resp= ServletActionContext.getResponse();
HttpServletRequest request = ServletActionContext.getRequest();
//resp.setContentType("xml");
resp.setContentType("text/html");
resp.setCharacterEncoding("utf-8");
try
PrintWriter out = resp.getWriter();
out.print("");
//out.print("shanghai");
catch (IOException e)
e.printStackTrace();



public void getCity()

List cityList = as.getAreasCityList(provinceid);
HttpServletResponse resp= ServletActionContext.getResponse();
//resp.setContentType("xml");
resp.setContentType("text/html");
resp.setCharacterEncoding("utf-8");
try
PrintWriter out = resp.getWriter();
out.print("");
//out.print("shanghai");
catch (IOException e)
e.printStackTrace();




public void getArea()

List areaList = as.getAreasCityList(cityid);
if(areaList.size()==0)

else
HttpServletResponse resp= ServletActionContext.getResponse();

resp.setContentType("text/html");
resp.setCharacterEncoding("utf-8");
try
PrintWriter out = resp.getWriter();
out.print("");

catch (IOException e)
e.printStackTrace();





参考技术A 你把问题说清楚点 什么叫做回显javaweb

ajax省市区三级联动

jdbc+servlet+ajax开发省市区三级联动

技术点：jdbc操作数据库，ajax提交，字符拦截器，三级联动

特点：局部刷新达到省市区三级联动，举一反三可以做商品分类等

宗旨：从实战中学习

博客讲解是按照两级联动，但下载的资源是三级联动含sql文件。

效果图：

首页核心代码：

 

[html] view plain copy

 

 

1. <%  
2.             List<HashMap<String,Object>> maps = ConnectionUtil.findProvinces();  
3.             pageContext.setAttribute("provinces", maps);  
4.         %>  
5.           
6.         <fieldset>  
7.             <legend>省市区三级联动</legend>  
8.                 省份:  
9.                 <select id="province" onchange="select_citys(this)">  
10.                     <option value="">-请选择-</option>  
11.                     <!-- 循环显示所有省份 -->  
12.                     <c:forEach var="pv" items="${provinces}">  
13.                         <option value="${pv.id}">${pv.name}</option>  
14.                     </c:forEach>  
15.                 </select>  
16.                 城市:  
17.                 <select id="city" onchange="select_areas(this)">  
18.                     <option value="">-请选择-</option>  
19.                 </select>  
20.                 区域:  
21.                 <select id="area">  
22.                     <option value="">-请选择-</option>  
23.                 </select>  
24.         </fieldset>  

ajax代码：

 

[html] view plain copy

 

 

1. function select_citys(obj){  
2.             var provinceId = $(obj).val();  
3.             if(!provinceId)return; // 声明变量就要判断是否为null  
4.             $.ajax({  
5.                 type:"post",//请求方式get/post  
6.                 url:"${ctx}/CityServlet",//请求对应的地址  
7.                 data:{"provinceId":provinceId},//往服务器传递的参数，  
8.                 success:function(data){//服务器交互成功调用的回调函数，data就是服务器端传递出来的数据  
9.                     var jdata = data.trim(); // 去前后空格  
10.                     if(jdata=="fail"){  
11.                         alert("查询失败!");  
12.                     }else{  
13.                         var jsonData = eval(jdata);//将字符串的json对象转换成json  
14.                         $("#area").html("<option>-请选择-</option>");  
15.                         append_template(jsonData,"city");  
16.                     }  
17.                 }  
18.             });  
19.         };  

20. 后台处理核心代码：

     

    [java] view plain copy

     

     

    1. protected void doPost(HttpServletRequest request,  
    2.             HttpServletResponse response) throws ServletException, IOException {  
    3.         PrintWriter out=response.getWriter();  
    4.         // 获取ajax请求发送过来的省份id参数  
    5.         String pid = request.getParameter("provinceId");  
    6.         if (pid != null && !pid.equals("")) {// 有变量就要进行空判断  
    7.             int provinceId = Integer.parseInt(pid);// 因为前端都是传String；所以要转换  
    8.             List<HashMap<String, Object>> citys = ConnectionUtil  
    9.                     .findCitys(provinceId);  
    10.             try {  
    11.                 // 将集合对象转换成json格式---List---JsonArr字符串[{},{},{}]  
    12.                 out.print(JSONUtil.serialize(citys));  
    13.             } catch (JSONException e) {  
    14.                 e.printStackTrace();  
    15.             }  
    16.         } else {  
    17.             // 查询失败  
    18.             out.print("fail");  
    19.         }  
    20.     }  
    21. 
        
        

        数据库操作：

         

        [java] view plain copy

         

         

        1. package com.ajax.connection;  
        2.   
        3. import java.sql.Connection;  
        4. import java.sql.DriverManager;  
        5. import java.sql.PreparedStatement;  
        6. import java.sql.ResultSet;  
        7. import java.sql.SQLException;  
        8. import java.sql.Statement;  
        9. import java.util.ArrayList;  
        10. import java.util.HashMap;  
        11. import java.util.List;  
        12.   
        13. /** 
        14.  * 数据库链接，查询类 
        15.  * 对jdbc操作数据库不懂的可以参考：http://blog.csdn.net/qq_19558705/article/details/49947317 
        16.  * 以下内容就不做过多的注释了 
        17.  * 实际业务会采用连接池的方式，这只做学习使用 
        18.  * @author Administrator 
        19.  * 
        20.  */  
        21. public class ConnectionUtil {  
        22.   
        23.     private static String url = "jdbc:mysql:///test";  
        24.     private static String username = "root";  
        25.     private static String password = "root";  
        26.       
        27.     public static Connection getConnection(){  
        28.         Connection connection = null;  
        29.         try{  
        30.             Class.forName("com.mysql.jdbc.Driver");  
        31.             connection = DriverManager.getConnection(url,username,password);  
        32.             return connection;  
        33.         }catch(Exception ex){  
        34.             return null;  
        35.         }  
        36.     }  
        37.       
        38.     public static List<HashMap<String, Object>> findProvinces(){  
        39.         Connection connection = null;  
        40.         Statement statement = null;  
        41.         ResultSet rs = null;  
        42.         List<HashMap<String, Object>> maps = null;  
        43.         try{  
        44.             String sql = "SELECT id,name FROM tm_province order by sort asc";  
        45.             connection = getConnection();  
        46.             statement = connection.createStatement();  
        47.             rs = statement.executeQuery(sql);  
        48.             maps = new ArrayList<HashMap<String,Object>>();  
        49.             HashMap<String, Object> map = null;  
        50.             while(rs.next()){  
        51.                 map = new HashMap<String, Object>();  
        52.                 map.put("id", rs.getInt("id"));  
        53.                 map.put("name", rs.getString("name"));  
        54.                 maps.add(map);  
        55.             }  
        56.             return maps;  
        57.         }catch(SQLException sql){  
        58.             sql.printStackTrace();  
        59.             return null;  
        60.         }finally{  
        61.             try{  
        62.                 if(rs!=null)rs.close();  
        63.                 if(statement!=null)statement.close();  
        64.                 if(connection!=null)connection.close();  
        65.             }catch(SQLException sql){  
        66.                 sql.printStackTrace();  
        67.             }  
        68.         }  
        69.     }  
        70.       
        71.     //后面内容省略，可以免费下载资源  
        72.       
        73. }  

        字符拦截器：

         

        [java] view plain copy

         

         

        1. package com.ajax.filter;  
        2.   
        3. import java.io.IOException;  
        4. import javax.servlet.Filter;  
        5. import javax.servlet.FilterChain;  
        6. import javax.servlet.FilterConfig;  
        7. import javax.servlet.ServletException;  
        8. import javax.servlet.ServletRequest;  
        9. import javax.servlet.ServletResponse;  
        10. import javax.servlet.http.HttpServletRequest;  
        11. import javax.servlet.http.HttpServletResponse;  
        12.   
        13. /** 
        14.  * 如果不清楚字符拦截器可以参考：http://blog.csdn.net/qq_19558705/article/details/49962153 
        15.  * @author Administrator 
        16.  * 
        17.  */  
        18. public class CharacterFilter implements Filter {  
        19.       
        20.     private FilterConfig config;  
        21.       
        22.     public void doFilter(ServletRequest req, ServletResponse resp,  
        23.             FilterChain chain) throws IOException, ServletException {  
        24.         HttpServletRequest request = (HttpServletRequest) req;  
        25.         HttpServletResponse response = (HttpServletResponse) resp;  
        26.         // 从web.xml文件中获取encoding对应的init-param中的param-value  
        27.         String encoding = config.getInitParameter("encoding");  
        28.         // 只要定义了变量；就要判断是否为空；不然会报空指针异常  
        29.         if (encoding != null) {  
        30.             // 指明内容请求格式的字符编码集  
        31.             response.setContentType("text/html ;charset=" + encoding);  
        32.             // 请求时规范字符编码格式  
        33.             request.setCharacterEncoding(encoding);  
        34.             // 指明输出的格式字符编码集  
        35.             response.setCharacterEncoding(encoding);  
        36.         }  
        37.         // 进入下一个拦截器  
        38.         chain.doFilter(request, response);  
        39.     }  
        40.     // FilterConfig 是拦截器的全局变量  
        41.     public void init(FilterConfig config) throws ServletException {  
        42.         this.config = config;  
        43.     }  
        44.     public void destroy() {  
        45.     }  
        46. }