0
点赞
收藏
分享

微信扫一扫

ajax实现省市联动动态展示省份

1. 什么是省市联动?  30

  - 在网页上,选择对应的省份之后,动态的关联出该省份对应的市。选择对应的市之后,动态的关联出该市对应的区。(首先要清楚需求)

- 进行数据库表的设计

t_area (区域表)
    id(PK-自增)	  code		name		pcode
    ---------------------------------------------
    1				001		 河北省		null
    2				002		 河南省		null
    3				003		 石家庄	    001
    4				004		 邯郸		001
    5				005		 郑州		002
    6				006		 洛阳		002
    7				007		 丛台区	    004  
    
    将全国所有的省、市、区、县等信息都存储到一张表当中。
    采用的存储方式实际上是code pcode形势。

2. 建表t_area,模拟好数据。 30

- 首先实现第一个功能:

  - 页面加载完毕之后,先把省份全部展现出来。

代码在com.bjpowernode.ajax.servlet     30-31

ListAreaServlet

package com.bjpowernode.ajax.servlet;

import com.alibaba.fastjson.JSON;
import com.bjpowernode.ajax.beans.Area;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebFilter;
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.sql.*;
import java.util.ArrayList;
import java.util.List;
//动态的获取对应的区域  30-31

@WebServlet("/listArea")
public class ListAreaServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        String pcode = request.getParameter("pcode");//获取提交的pcode  31

        //连接数据库,获取所有对应的区域,最终响应一个JSON格式的字符串给web前端
        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        List areaList = new ArrayList<>();
        try {
            //注册驱动
            Class.forName("com.mysql.cj.jdbc.Driver");
            //获取链接
            // 获取连接
            String url = "jdbc:mysql://localhost:3306/bjpowernode?useUnicode=true&characterEncoding=UTF-8";
            String user = "root";
            String password = "lzl";
            conn = DriverManager.getConnection(url,user,password);
            //获取预编译对象  30-31
            String sql = "";
            if(pcode==null){
                sql = "select code,name from t_area where pcode is null";
                ps = conn.prepareStatement(sql);
            }else{
                sql = "select code,name from t_area where pcode =?";
                ps = conn.prepareStatement(sql);
                ps.setString(1,pcode);
            }

            //执行sql
            rs = ps.executeQuery();
            //处理结果集
            while(rs.next()){
                String code = rs.getString("code");
                String name = rs.getString("name");
                //将以上数据封装
                Area a = new Area(code, name);
                areaList.add(a);//将a对象放入list集合
            }

        } catch (Exception e) {
            e.printStackTrace();
        }finally {
            if(rs!=null){
                try {
                    rs.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if(ps!=null){
                try {
                    ps.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if(conn!=null){
                try {
                    conn.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
        }
        response.setContentType("text/html;charset=UTF-8");
        // 使用fastjson将java对象转换成json字符串。
        String json = JSON.toJSONString(areaList);
        // 响应JSON。
        response.getWriter().print(json);

    }
}

com.bjpowernode.ajax.beans

javabean  Area

package com.bjpowernode.ajax.beans;

//这是一个javabean,封装对应的区域结果用的  30
public class Area {
    private String code;
    private String name;

    public Area() {
    }

    public Area(String code, String name) {
        this.code = code;
        this.name = name;
    }

    public String getCode() {
        return code;
    }

    public void setCode(String code) {
        this.code = code;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

E:\java学习\Ajax\course\course9\web

ajax13.html

<!--省市联动  30-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市联动</title>
</head>
<body>
<!--引入我们自己写的jQuery库-->
<script type="text/javascript" src="/ajax/js/jQuery-1.0.0.js"></script>

<script type="text/javascript">
    //发送ajax请求,获取所有的省份,省份的pcode是null
    $(function (){
        $.ajax({
            type:"get",
            url:"/ajax/listArea",
            data:"t="+new Date().getTime(),
            async:true,
            success:function (jsonArr){
                // [{"code":"001", "name":"河北省"},{"code":"002", "name":"河南省"}]
                // 以上格式的json是我们自己设计出来的,希望服务器能够给我们返回这样一个json格式的字符串。
                var html = "<option value=''>--请选择省份--</option>"
                for(var i = 0;i<jsonArr.length;i++){
                    var area = jsonArr[i];
                    html+="<option value='"+area.code+"'>"+area.name+"</option>"
                }
                $("#province").html(html)
            }
        })

        //只要change发生,就发送ajax请求
        $("#province").change(function (){
            //alert("发送ajax请求")
            //alert(this)//这里的this指的是select元素
            //alert(this.value)//this.value可以得到code

            //发送ajax请求
            $.ajax({
                type:"get",
                url:"/ajax/listArea",
                data:"t="+new Date().getTime()+"&pcode="+this.value,
                async:true,
                success:function (jsonArr){
                    // [{"code":"006", "name":"XXX"},{"code":"008", "name":"YYYY"}]
                    // 以上格式的json是我们自己设计出来的,希望服务器能够给我们返回这样一个json格式的字符串。
                    var html = "<option value=''>--请选择城市--</option>"
                    for(var i = 0;i<jsonArr.length;i++){
                        var area = jsonArr[i];
                        html+="<option value='"+area.code+"'>"+area.name+"</option>"
                    }
                    $("#city").html(html)
                }
            })
        })

    })
</script>

<select id="province" >
    <!--<option value="">--请选择省份--</option>
    <option value="001">河北省</option>
    <option value="002">河南省</option>-->
</select>
<select id="city">

</select>

</body>
</html>

E:\java学习\Ajax\course\course9\web\js

jQuery-1.0.0.js

// 将jQuery单独写到js文件中使用是引入库  27

/*封装一个函数,通过这个函数可以获取到html页面中的节点,这个函数我给他起一个名字,叫做:jQuery*/
/*要封装的代码是:根据id来获取元素。document.getElementById("btn")*/
/*设计思路来自于CSS的语法。 #id 可以获取到这个元素 */
//下面这段代码是进行封装
function jQuery(selector){

    //根据id获取元素  22
    if(typeof selector=="string"){
        // selector可能是#id,也可以能是其他的选择器,例如类选择器:.class
        if(selector.charAt(0)=="#"){//解释这个selector就是一个变量,#号是封装的线索(也就是传过来的必须是以#号开头)
            //selector是一个id选择器
            //selector.substring(1)解释,利用substring截取字符串函数将传来的#id,截取留下id
            //var domObj = document.getElementById(selector.substring(1));
            //注意如果不写var domObj就是一个全局变量   25
            domObj = document.getElementById(selector.substring(1));
            //返回domObj
            //return domObj

            //返回jQuery对象
            return new jQuery()
        }
    }

    //页面加载完毕后注册回调函数   23
    //typeof是判断参数的类型这里的typeof selector=="function"是判断类型是不是函数
    if(typeof selector=="function"){
        window.onload = selector
    }

    //定义一个html()函数,代替:domObj.innerHTML = ""  25
    this.html = function (htmlStr){
        //domObj全局变量
        domObj.innerHTML = htmlStr
    }

    //定义一个click()函数,代替:domObj.onclick = function(){}  25
    this.click = function (fun){
        domObj.onclick = fun
    }

    //还可以封装很多事件   25
    this.focus = function (fun){
        domObj.onfocus = fun
    }

    this.blur = function(fun) {
        domObj.onblur = fun
    }

    this.change = function (fun){
        domObj.onchange = fun
    }
    // ....

    //封装获取文本框中的用户名的value函数 ,代替domObj.value  26
    this.val = function (v){
        if(v==undefined){//如果没传参,就返回文本框的输入的
            return domObj.value
        }else{//传参了,姐把参数赋值
            domObj.value = v
        }

    }

    //定义一个静态的方法发送ajax请求   28
    /**
     * 分析:使用ajax函数发送ajax请求的时候,需要程序员给我们传过来什么?
     *      请求的方式(type):GET/POST
     *      请求的URL(url):url
     *      请求时提交的数据(data):data
     *      请求时发送异步请求还是同步请求(async):true表示异步,false表示同步。
     */
    jQuery.ajax = function (jsonArgs){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function (){
            if(this.readyState==4){
                if(this.status==200){
                    // 我们这个工具类在封装的时候,先不考虑那么多,假设服务器返回的都是json格式的字符串。
                    var jsonObj = JSON.parse(this.responseText);
                    //调用函数
                    jsonArgs.success(jsonObj)
                }
            }
        }

        if(jsonArgs.type.toUpperCase()=="POST"){
            xhr.open("POST",jsonArgs.url,jsonArgs.async)
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
            xhr.send(jsonArgs.data)
        }

        if(jsonArgs.type.toUpperCase()=="GET"){
            xhr.open("GET",jsonArgs.url+"?"+jsonArgs.data,jsonArgs.async)
            xhr.send()
        }


    }

}

//但是我们嫌jQuery太长,就将jQuery赋值给$符号
$ = jQuery
new jQuery()//这里new一下这个类,是为了保证静态的方法能被调用

ajax实现省市联动动态展示省份_ajax

举报

相关推荐

0 条评论