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 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>

posted @ 2021-05-16 23:51 zou-ting-rong 阅读(239) 评论(0) 编辑收藏举报

刷新页面返回顶部

ajax入门－实现省份下拉框

ajax请求步骤

ajax实现省份联动

工具类CityUtils

公告

　　工具类CityUtils