ajax请求步骤
- 获取xmlHttpRequest对象
- 设置回调函数(onreadystate用来绑定回调函数)
- 设置发送参数
- 向服务器发送请求
ajax实现省份联动
工具类CityUtils
package utils; import java.util.HashMap; import java.util.Map; import java.util.Set; /** * @author ztr * @version 创建时间：2021年5月13日 下午7:40:29 * 类说明 */ public class CityUtils { private static final Map<String, String> citys = new HashMap<String, String>(); static{ citys.put("黑龙江", "哈尔滨,大庆,齐齐哈尔"); citys.put("江西","南昌,九江,赣州"); citys.put("辽宁", "沈阳,大连,葫芦岛"); } //获取省份方法 public static String getProvince(){ //获取map中的键 Set<String> set = citys.keySet(); String provinceString = ""; for(String p :set){ provinceString += p + ","; } //为了取出字符串尾部的逗号 return provinceString.substring(0,provinceString.length()-1); } //获取城市信息 public static String getCity(String provincename){ //获取map中指定的键所对应的值 return citys.get(provincename); } }
ProvinceServlet.java
package servlet; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import utils.CityUtils; /** * Servlet implementation class ProvinceServlet */ public class ProvinceServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //得到省份信息 String province = CityUtils.getProvince(); System.out.println(province); response.setCharacterEncoding("UTF-8"); response.setContentType("text/text"); response.getWriter().write(province); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
CitysServlet.java
package servlet; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import utils.CityUtils; /** * Servlet implementation class CityServlet */ public class CityServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); //得到省份信息 String pname = request.getParameter("pname"); //根据省份名称得到对应的城市信息 String city = CityUtils.getCity(pname); //写回到浏览器信息 //设置响应编码 response.setCharacterEncoding("UTF-8"); response.setContentType("text/text"); response.getWriter().write(city); }
demo3.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/my.js"></script> <script type="text/javascript"> //获取省份信息 function getProvince() { //向服务器中发送请求获取省份信息 //１获取XMLHttpRequest对象 var xmlHttp = getXMLHttprequest(); //２绑定回调函数对服务器响应的数据进行处理 xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState == 4){ if(xmlHttp.status == 200){ //将服务器得到的信息吃力填充到省份下拉框中 //获取服务器响应的数据 var provinces = xmlHttp.responseText; var ps = provinces.split(","); //使用html dom来完成将数据填充到下拉框操作 for(var i = 0; i< ps.length;i++){ var option = document.createElement("option"); option.text = ps[i]; //将option添加到下拉框中 document.getElementById("province").add(option); } } } } //3设置发送请求的方法和url xmlHttp.open("POST","http://localhost:8080/ajax/ProvinceServlet"); //4发送请求 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttp.send("null"); } //获取城市信息 function getCity() { //获取省份名称 var provinceElement = document.getElementById("province"); var ops = provinceElement.options; //selectedIndex是返回已经被选中的下拉框 var option = ops[provinceElement.selectedIndex] //获取被选中的省份 var pname = option.text; //获取XMlHttpRequest对象 var xmlHttp = getXMLHttprequest(); //绑定回调事件，对服务器响应的数据进行处理 xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState == 4){ if(xmlHttp.status == 200){ document.getElementById("city").innerHTML = "<option>--请选择城市--</option>"; var citys = xmlHttp.responseText; //split将字符串分割为字符串数组 var cs = citys.split(","); //使用html dom 来完成将数据填充到下拉框操作 for (var i= 0;i < cs.length; i++) { //新建一个新标签 var option = document.createElement("option"); option.text = cs[i]; //将option加入下拉框中 document.getElementById("city").add(option); } } } } //设置发送的请求的方式和url var url = "http://localhost:8080/ajax/CityServlet"; xmlHttp.open("POST",url); //发送请求 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttp.send("pname="+pname); } </script> </head> <!-- 当页面加载完成之后加载省份 --> <body onload="getProvince()"> <!-- onchange事件，当我们选中某一个省份时--> <select id="province" onchange="getCity()"> <option>--请选择省份--</option> </select> <select id="city"> <option>--请选择城市--</option> </select> </body> </html>