j2ee之AJAX二級聯(lián)動(dòng)效果
更新時(shí)間:2017年08月22日 17:00:52 作者:情似雨餘黏地絮
這篇文章主要為大家詳細(xì)介紹了j2ee之AJAX二級聯(lián)動(dòng)效果的實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了AJAX二級聯(lián)動(dòng)效果的具體代碼,供大家參考,具體內(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; /* 拿到第一個(gè)下拉框中選中的值 */ var index = this.selectedIndex; var optionElement = this[index]; var optionValue = optionElement.innerHTML; /* 把這個(gè)值發(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í)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- PHP+Mysql+Ajax+JS實(shí)現(xiàn)省市區(qū)三級聯(lián)動(dòng)
- ThinkPHP使用心得分享-ThinkPHP + Ajax 實(shí)現(xiàn)2級聯(lián)動(dòng)下拉菜單
- jquery ajax實(shí)現(xiàn)下拉框三級無刷新聯(lián)動(dòng),且保存保持選中值狀態(tài)
- Ajax二級聯(lián)動(dòng)菜單實(shí)現(xiàn)原理及代碼
- 一個(gè)強(qiáng)健 實(shí)用的asp+ajax二級聯(lián)動(dòng)菜單(有演示和附源程序打包下載)
- asp.net省市三級聯(lián)動(dòng)的DropDownList+Ajax的三種框架(aspnet/Jquery/ExtJs)示例
- ajax讀取數(shù)據(jù)庫內(nèi)容實(shí)現(xiàn)二級聯(lián)動(dòng)下拉選擇菜單示例
- JavaScript Ajax Json實(shí)現(xiàn)上下級下拉框聯(lián)動(dòng)效果實(shí)例代碼
- Ajax實(shí)現(xiàn)無刷新三聯(lián)動(dòng)下拉框
- 落伍首發(fā) php+mysql 采用ajax技術(shù)的 省 市 地 3級聯(lián)動(dòng)無刷新菜單 源碼
相關(guān)文章
SpringBoot3整合pageHelper實(shí)現(xiàn)分頁功能
PageHelper是一個(gè)開源的Java分頁插件,它提供了方便的分頁查詢功能,適用于大多數(shù)基于Java的持久層框架(如MyBatis、Hibernate等),本文給大家介紹了springboot3整合pageHelper實(shí)現(xiàn)分頁功能的方法,需要的朋友可以參考下2024-08-08在Android的應(yīng)用中實(shí)現(xiàn)網(wǎng)絡(luò)圖片異步加載的方法
這篇文章主要介紹了在Android的應(yīng)用中實(shí)現(xiàn)網(wǎng)絡(luò)圖片異步加載的方法,一定程度上有助于提高安卓程序的使用體驗(yàn),需要的朋友可以參考下2015-07-07Mybatis通用Mapper(tk.mybatis)的使用
本文主要介紹了Mybatis通用Mapper(tk.mybatis)的使用,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07SpringCloud Nacos配置中心管理超詳細(xì)講解
這篇文章主要介紹了Springcloud中的Nacos服務(wù)配置,本文以用戶微服務(wù)為例,進(jìn)行統(tǒng)一的配置,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11Java正則表達(dá)式如何匹配特定html標(biāo)簽內(nèi)的內(nèi)容
這篇文章主要給大家介紹了關(guān)于Java正則表達(dá)式如何匹配特定html標(biāo)簽內(nèi)的內(nèi)容的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09