ajax入门-实现省份下拉框
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 Mapcitys = new HashMap (); static{ citys.put("黑龙江", "哈尔滨,大庆,齐齐哈尔"); citys.put("江西","南昌,九江,赣州"); citys.put("辽宁", "沈阳,大连,葫芦岛"); } //获取省份方法 public static String getProvince(){ //获取map中的键 Set 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 heretitle>
<script type="text/javascript" src="js/my.js">script>
<script type="text/javascript">
//获取省份信息
function getProvince() {
//向服务器中发送请求获取省份信息
//1获取XMLHttpRequest对象
var xmlHttp = getXMLHttprequest();
//2绑定回调函数对服务器响应的数据进行处理
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 = "";
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()">
<select id="province" onchange="getCity()">
<option>--请选择省份--option>
select>
<select id="city">
<option>--请选择城市--option>
select>
body>
html>
原文:https://www.cnblogs.com/zoutingrong/p/14774031.html