java ajax二级省市联动

最新推荐文章于 2020-07-02 18:55:12 发布

ivoter2

最新推荐文章于 2020-07-02 18:55:12 发布

阅读量231

点赞数

文章标签： Java Ajax XML Servlet DAO

本文链接：https://blog.csdn.net/ivoter2/article/details/83742611

版权

省市二级联动实现，网上找了好多，终于实现了。这里用的是数据库链接查询并用XML方式返回。（用的数据池）

1.、编写的index.jsp。

<%@ page language="java" import="java.util.*,com.dao.*" pageEncoding="UTF-8"%>
<%@ page import="com.vo.*" %>
<%   //这个是调用dao层返回市表中的内容。
	UserDao ud=new UserDao();
	ArrayList<Sheng> list=(ArrayList)ud.seclect();
 %>

<html>
  <head>
  <script type="text/javascript" src="js/test.js"></script>
    
    <title>My JSP 'index.jsp' starting page</title>
    

  </head>
  
  <body>
  	<form method="post" name="form1"  action=""> 
        
        <select id="slt1" οnchange="updateSelect()"> 
           <option>请选择省份</option> 
        <% 
        	Sheng sheng=null;
          for(int i=0;i<list.size();i++) 
          { 
          
          sheng=(Sheng)list.get(i); 
         %> 
            <option value="<%=sheng.getId()%>"><%=sheng.getName() %></option> 
          <% 
          } 
          %> 
        </select>  
        
        <select id="slt2"> 
            <option value="">请选择地市</option>   
        </select> 
     </form> 
    
  </body>
</html>

2、编写js代码。

function getXmlHttpRequestObject() {
	if (window.XMLHttpRequest) {
		return new XMLHttpRequest();
	} else {
		if (window.ActiveXObject) {
			return new ActiveXObject("Microsoft.XMLHTTP");
		} else {
		}
	}
}
function createAjaxObj() {
	var httprequest = false;
	if (window.XMLHttpRequest) {
		httprequest = new XMLHttpRequest();
		if (httprequest.overrideMimeType) {
			httprequest.overrideMimeType("text/xml");
		}
	} else {
		if (window.ActiveXObject) {
			try {
				httprequest = new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch (e) {
				try {
					httprequest = new ActiveXObject("Microsoft.XMLHTTP");
				}
				catch (e) {
				}
			}
		}
	}
	return httprequest;
}
var httpReq = createAjaxObj();
//上边的代码是固定的。

function updateSelect(){
	var selected = document.all.slt1.value;
	httpReq.open("GET","testU?tid="+selected,false);
	httpReq.onreadystatechange=function(){
		checkReqCallBack();
	};
	httpReq.send(null);
}

function checkReqCallBack(){
	if(httpReq.readyState == 4) { 
		 if(httpReq.status ==200){
		      var xmlDoc = httpReq.responseXML.documentElement;//获得返回的XML文档
		      var xSel = xmlDoc.getElementsByTagName('select');
		      //获得XML文档中的所有<select>标记
		      var select_root = document.getElementById('slt2');
		      //获得网页中的第二个下拉框
		      select_root.options.length=0;
		      //每次获得新的数据的时候先把每二个下拉框架的长度清0
		      
		      for(var i=0;i<xSel.length;i++){
		        var xValue = xSel[i].childNodes[0].firstChild.nodeValue;
		        //获得每个<select>标记中的第一个标记的值,也就是<value>标记的值
		        var xText = xSel[i].childNodes[1].firstChild.nodeValue;
		        //获得每个<select>标记中的第二个标记的值,也就是<text>标记的值
		        
		        var option = new Option(xText, xValue);
		        //根据每组value和text标记的值创建一个option对象
		        
		        try{
		          select_root.add(option);//将option对象添加到第二个下拉框中
		        }catch(e){
		        }
		      }
		 }else{
		      alert("不能得到描述信息:" + req.statusText);
		 }
	}
}

3、编写的servlet。

package com.servlet;



import java.io.IOException;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.dao.UserDao;
import com.vo.Shi;

public class TestU extends HttpServlet {
	public String tid;

	
	private static final long serialVersionUID = 1L;


	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		UserDao ud=new UserDao();
		try {
			response.setCharacterEncoding("GBK");
	        response.setContentType("text/xml");
	        response.setHeader("Cache-Control", "no-cache");
	        request.setCharacterEncoding("GBK");
	        response.setCharacterEncoding("UTF-8");
			
			tid=request.getParameter("tid").toString();
			ArrayList<?> list=ud.check(tid);
			String xml_start = "<selects>";
	        String xml_end = "</selects>";
	        String xml = "";
	        Shi shi=null;
	        for(int i=0;i<list.size();i++){
	        	shi=new Shi();
	        	shi=(Shi) list.get(i);
	        	xml+="<select><value>"+shi.getId()+"</value><text>"+shi.getName()+"</text></select>";
	        }
	        String last_xml = xml_start + xml + xml_end;
	        response.getWriter().write(last_xml);
			
		} catch (Exception e) {
			e.printStackTrace();
		}
		
	}

	
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		doGet(request,response);
	}

}

总结：当一级省select改变时出发ajax，调用servlet并在servlet中调用dao层返回查找到的市级表，用ArrayList返回给servlet，在servlet中生成XML代码。

在js中用XML方式解析，（1、取得获得XML文档中的所有<select>标记，为以后的迭代准备。2、取得页面的市节点，创建一个option对象，将option对象添加到第二个下拉框中。）。

ivoter2

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
java ajax二级省市联动

省市二级联动实现，网上找了好多，终于实现了。这里用的是数据库链接查询并用XML方式返回。（用的数据池） 1.、编写的index.jsp。 &lt;%@ page language="java" import="java.util.*,com.dao.*" pageEncoding="UTF-8"%&gt;&lt;%@ page import="com.vo.*" %&
复制链接

扫一扫