案例:Ajax实现省市联动,选择省后动态显示市和区

前端:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市联动title>
head>
<body>
<script src="jquery.js" type="text/javascript">script>
<script type="text/javascript">
    $(function () {
        var provinceSelect = $("#province");
        var citySelect = $("#city");
        //浏览器加载完毕发送ajax请求,获取所有省份到下拉列表
        $.ajax({
            dataType:"json",
            type:"get",
            url:"/xmm/province",
            async:true,
            data:"t="+new Date(),
            success:function (json) {
                for (var i = 0; i < json.length; i++) {
                    myJson = json[i];
                    <!--这是一种动态生成标签的方式,也可以用字符串拼接+innerHTML的方式-->
                    selectRow = document.createElement("option");<!--创建option标签-->
                    selectRow.textContent = myJson.cityname;<!--标签内容-->
                    selectRow.value = myJson.id;<!--标签属性值,注意用value-->
                    provinceSelect[0].appendChild(selectRow);<!--标签加入到select标签中-->
                }
            }
        })
        //省下拉框选择完毕后执行该事件,获取市
        provinceSelect[0].onchange = function () {
            $.ajax({
                dataType:"json",
                type:"get",
                url:"/xmm/province",
                data:"t="+new Date()+"&id="+this.value,
                async:true,
                success:function (json) {
                    var provinceSelect = $("#city");
                    for (var i = 0; i < json.length; i++) {
                        myJson = json[i];
                        <!--这是一种动态生成标签的方式,也可以用字符串拼接+innerHTML的方式-->
                        selectRow = document.createElement("option");<!--创建option标签-->
                        selectRow.textContent = myJson.cityname;<!--标签内容-->
                        selectRow.value = myJson.id;<!--标签属性值-->
                        provinceSelect[0].appendChild(selectRow);<!--标签加入到select标签中-->
                    }
                }
            })
        }
        //市下拉列表框选择完毕后执行该事件,获取区
        citySelect[0].onchange = function () {
            $.ajax({
                dataType:"json",
                type:"get",
                url:"/xmm/province",
                data:"t="+new Date()+"&id="+this.value,
                async:true,
                success:function (json) {
                    var provinceSelect = $("#country");
                    for (var i = 0; i < json.length; i++) {
                        myJson = json[i];
                        <!--这是一种动态生成标签的方式,也可以用字符串拼接+innerHTML的方式-->
                        selectRow = document.createElement("option");<!--创建option标签-->
                        selectRow.textContent = myJson.cityname;<!--标签内容-->
                        selectRow.value = myJson.id;<!--标签属性值-->
                        provinceSelect[0].appendChild(selectRow);<!--标签加入到select标签中-->
                    }
                }
            })
        }
    })
    
    
script>
请选择所在省:
<select id="province">
    <option value="">---请选择省份---option>
select><br/>
请选择所在市:
<select id="city">
    <option value="">---请选择所在市---option>
select><br/>
请选择所在区:
<select id="country">
    <option value="">---请选择所在直辖区---option>
select><br/>
body>
html>

后端:

package provinceAndcity;

import com.alibaba.fastjson.JSON;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;
import java.util.ResourceBundle;
@WebServlet("/province")
public class ProvinceServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        ResourceBundle rb = ResourceBundle.getBundle("jdbc");
        Connection con = null;
        PreparedStatement pre = null;
        ResultSet rs = null;
        List<ProvinceJSON> list = new ArrayList();
        try {
            Class.forName(rb.getString("driver"));
            con = DriverManager.getConnection(rb.getString("url"),rb.getString("username"),rb.getString("password"));
            if (request.getParameter("id") == null){//查询省
                pre = con.prepareStatement("select cityname, id from city where type='1'");
            }else{//根据前端返回值查询市区
                pre = con.prepareStatement("select cityname, id from city where pid= ? ");
                pre.setString(1,request.getParameter("id"));
            }
            rs = pre.executeQuery();
            while(rs.next()){
                int id = rs.getInt("id");
                String cityname = rs.getString("cityname");
                ProvinceJSON province = new ProvinceJSON(id,cityname);
                list.add(province);
            }
            String jsons = JSON.toJSONString(list);
            out.print(jsons);
        } catch (Exception e) {
            e.printStackTrace();
        }finally {
            if (rs != null) {
                try {
                    rs.close();
                } catch (SQLException throwables) {
                    throwables.printStackTrace();
                }
            }
            if (pre != null) {
                try {
                    pre.close();
                } catch (SQLException throwables) {
                    throwables.printStackTrace();
                }
            }
            if (con != null) {
                try {
                    con.close();
                } catch (SQLException throwables) {
                    throwables.printStackTrace();
                }
            }
        }
    }
}

你可能感兴趣的:(AJAX,ajax,javascript,前端)