j2ee之AJAX的二级联动
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%>"> <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; /* 把这个值发送给服务器 */ 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); /* -----接收相应的数据----- */ ajax.onreadystatechange = function(){ if(ajax.readyState == 4 && ajax.status == 200){ /* 拿到xml */ var xmlDocument = ajax.responseXML; /* 用xml的解析方式拿到城市根据标签名称 */ 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是把数据放到了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>"); } }
ajax想后台传递多个对象数据：
$.ajax({ type:"POST", url:"${pageContext.request.contextPath}/suspicious/suspiciousAddNewCase", dataType: 'json', contentType : 'application/json', data : JSON.stringify(data), success:function(data){ console.info(data); if(data.rst){ alert("新增失败"); }else{ alert("新增成功"); } }, error:function(){ console.info("AJAXq请求错误"); } });
