您好,登錄后才能下訂單哦!
本文實(shí)例為大家分享了AJAX二級聯(lián)動效果的具體代碼,供大家參考,具體內(nèi)容如下
Ajax.js
var createAjax = function(){ var ajax = null; try{ ajax = new ActiveXObject("microsoft.xmlhttp"); }catch(e1){ try{ ajax = new XMLHttpRequest(); }catch(e2){ alert("請換掉你的瀏覽器"); } } return ajax; }
test3.xml
<%@ page language="Java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript" src="js/ajax.js"></script> <base href="<%=basePath%>" rel="external nofollow" > <title>??</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> </head> <body> <select id="province"> <option>請選擇省份</option> <option>江蘇</option> <option>江西</option> </select> <select id="city"> <option>請選擇城市</option> </select> <script type="text/javascript"> document.getElementById("province").onchange = function(){ var cityElement = document.getElementById("city"); cityElement.options.length = 1; /* 拿到第一個下拉框中選中的值 */ var index = this.selectedIndex; var optionElement = this[index]; var optionValue = optionElement.innerHTML; /* 把這個值發(fā)送給服務(wù)器 */ var ajax = createAjax(); var url = "${pageContext.request.contextPath }/SelectServlet?time="+new Date().getTime(); var method = "POST"; ajax.open(method , url); ajax.setRequestHeader("content-type" , "application/x-www-form-urlencoded"); var content = "province=" + optionValue; ajax.send(content); /* -----接收相應(yīng)的數(shù)據(jù)----- */ ajax.onreadystatechange = function(){ if(ajax.readyState == 4 && ajax.status == 200){ /* 拿到xml */ var xmlDocument = ajax.responseXML; /* 用xml的解析方式拿到城市根據(jù)標(biāo)簽名稱 */ var cityArray = xmlDocument.getElementsByTagName("cityOption"); for (var i = 0; i < cityArray.length; i++){ /* 用xml的解析方式拿到城市的值 */ var city = cityArray[i].firstChild.nodeValue; var option = document.createElement("option"); option.innerHTML = city; cityElement.appendChild(option); } } } } </script> </body> </html>
SelectServlet.java
package com.newtouch.servlet; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * Servlet implementation class SelectServlet */ @WebServlet("/SelectServlet") public class SelectServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public SelectServlet() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse * response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub response.getWriter().append("Served at: ").append(request.getContextPath()); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse * response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); // 這里是text/xml是把數(shù)據(jù)放到了xml中 response.setContentType("text/xml;charset=utf-8"); String province = request.getParameter("province"); response.getWriter().write("<?xml version='1.0' encoding='utf-8' ?>"); response.getWriter().write("<root>"); if ("江蘇".equals(province)) { response.getWriter().write("<cityOption>1</cityOption>"); response.getWriter().write("<cityOption>2</cityOption>"); response.getWriter().write("<cityOption>3</cityOption>"); response.getWriter().write("<cityOption>4</cityOption>"); } else if ("江西".equals(province)) { response.getWriter().write("<cityOption>一</cityOption>"); response.getWriter().write("<cityOption>二</cityOption>"); response.getWriter().write("<cityOption>三</cityOption>"); response.getWriter().write("<cityOption>四</cityOption>"); } response.getWriter().write("</root>"); } }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。