份-城市，基於jQuery的AJAX二級聯動,用Struts2整合AJAX【非數據庫版】
阿新 • • 發佈：2018-12-03
context print oct 佛山 ray 根據 remove back 基於
package loaderman.provincecity; import java.io.IOException; import java.util.LinkedHashSet; import java.util.Set; import com.opensymphony.xwork2.ActionSupport; /** * 控制器 * @author AdminTC */ public class ProvinceCityAction extends ActionSupport{ private String province; publicvoid setProvince(String province) { this.province = province; //System.out.println("註入" + province); } //根據省份查詢城市 public String findCityByProvince() throws Exception { System.out.println("進來了"); setCity = new LinkedHashSet<String>(); if("湖南".equals(province)){ setCity.add("長沙"); setCity.add("株洲"); }else if("廣東".equals(province)){ setCity.add("廣州"); setCity.add("中山"); setCity.add("佛山"); } return SUCCESS; } private Set<String> setCity; public Set<String> getSetCity() {return setCity; } }
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.0.dtd"> <struts> <package name="loaderman" extends="json-default" namespace="/"> <!-- 根據省份查詢城市 --> <action name="findCityByProvinceRequest" class="loaderman.provincecity.ProvinceCityAction" method="findCityByProvince"> <result name="success" type="json"/> </action> </package> </struts>
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>省份-城市，基於jQuery的AJAX二級聯動</title> <script type="text/javascript" src="js/jquery-1.8.2.js"></script> </head> <body> <select id="province"> <option>選擇省份</option> <option>湖南</option> <option>廣東</option> </select> <select id="city"> <option>選擇城市</option> </select> <!-- 省份->城市 --> <script type="text/javascript"> //定位省份下拉框，同時添時內容改變事件 $("#province").change( function(){ //清空原城市下拉框中的內容，除第一項外 $("#city option:gt(0)").remove(); //獲取選中的省份 var province = $("#province option:selected").text(); //如果選中的不是"選擇省份" if("選擇省份"!=province){ $.ajax( { type : "POST", url : "${pageContext.request.contextPath}/findCityByProvinceRequest?time="+new Date().getTime(), data : {"province":province}, success : function(backDate,textStatus,ajax){ //alert(backDate!=null?"收到":"為收到"); //alert(ajax.responseText); //解析json文本 var array = backDate.setCity; var size = array.length; for(var i=0;i<size;i++){ var city = array[i]; var $option = $("<option>"+city+"</option>"); $("#city").append($option); } } } ); } } ); </script> </body> </html>
份-城市，基於jQuery的AJAX二級聯動,用Struts2整合AJAX【非數據庫版】