二级菜单联动 ajax+json
|
Web应用目录： 具体的代码如下： AjaxJSON.java package AjaxJson;
import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.List; import net.sf.json.JSONArray; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;
public class AjaxJSON extends HttpServlet {
/** * */ private static final long serialVersionUID = 1L;
/** * The doGet method of the servlet. <br> * * This method is called when a form has its tag value method equals to get. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException { this.doPost(request,response); }
/** * The doPost method of the servlet. <br> * * This method is called when a form has its tag value method equals to post. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
response.setContentType("text/html;charset=utf-8"); String province =new String(request.getParameter("province").getBytes("ISO-8859-1"),"UTF-8") ; System.out.println("后台中的参数省份是："+province); List<City> cities = new ArrayList<City>(); JSONArray jsonArray = null; //需要带入Json-lib包； if ("广东省".equals(province)) { City city1 = new City(1,"广州"); City city2 = new City(1,"深圳"); City city3 = new City(1,"珠海"); City city4 = new City(1,"佛山"); cities.add(city1); cities.add(city2); cities.add(city3); cities.add(city4); // 把java对象转换为json字符串 jsonArray = JSONArray.fromObject(cities); }
if("海南省".equals(province)) { City city1 = new City(1,"海口"); City city2 = new City(1,"三亚"); cities.add(city1); cities.add(city2); jsonArray = JSONArray.fromObject(cities); }
PrintWriter pw = response.getWriter(); pw.write(jsonArray.toString()); System.out.println(jsonArray.toString()); }
}
City.java
package AjaxJson; publicclass City {
private Integer id; private String name; public City(Integer id,String name) { super(); this.id = id; this.name = name; } public Integer getId() { returnid; } publicvoid setId(Integer id) { this.id = id; } public String getName() { returnname; } publicvoid setName(String name) { this.name = name; }
}
Ajax_json.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <select id="provinceID"> <option>选择省份</option> <option>广东省</option> <option>海南省</option> </select> <select id="cityID"> <option>选择城市</option> </select>
<script type="text/javascript"> document.getElementById("provinceID").onchange=function() { var province = this[this.selectedIndex].innerHTML; alert("*****************province="+province); var cityElement = document.getElementById("cityID"); //删除多余的城市，从最后一个开始删除 var size = cityElement.options.length; if(size>1) { for(var i = size-1;i>0;i--) { cityElement.removeChild(cityElement.options[i]); } } //加载XMLHttpRequest对象 var xhr = createXHR(); xhr.onreadystatechange=function() { if(xhr.readyState==4) { if(xhr.status==200) { //AJAX引擎读取服务端的信息 var xmlDocument = xhr.responseText; //将Java语言的String类型转换JavaScript的string类型 var json = eval(xmlDocument); size = json.length; for(var i = 0;i<size;i++) { //得到每个城市的名称 var city = json[i].name; var optionElement = document.createElement("option"); optionElement.innerHTML= city; cityElement.appendChild(optionElement); }
} } }
var method = "POST"; var sendData="province="+province; var url = "${pageContext.request.contextPath}/AjaxJSON?time="+new Date().getTime(); alert("url="+url); xhr.open(method,url); xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); xhr.send(sendData); } //创建XMLHttpRequest function createXHR() { var xhr=null; try{ //ie6 xhr = new ActiveXObject(microsoft.xmlhttp); }catch(e) { //其他浏览器 xhr = new XMLHttpRequest(); } return xhr; } </script>
</body> </html> （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |