AJAX手写JQuery框架封装AJAX请求和常见方法实现项目功能省市联动查询效果------AJAX

建立一个SQL表

CREATE TABLE t_stu(id BIGINT AUTO_INCREMENT PRIMARY KEY,username VARCHAR(255),age INT,address VARCHAR(255));
INSERT INTO t_stu(id,username,age,address) VALUES(NULL,"zhangsan",15,"广州")
INSERT INTO t_stu(id,username,age,address) VALUES(NULL,"Jack",15,"广州")
INSERT INTO t_stu(id,username,age,address) VALUES(NULL,"Rose",15,"广州")
SELECT  * FROM t_stu
CREATE TABLE t_area(id BIGINT PRIMARY KEY AUTO_INCREMENT,`code` VARCHAR(255),`name` VARCHAR(255),pcode VARCHAR(255))
INSERT INTO t_area(id,`code`,`name`,pcode) VALUES(NULL,'001','河北省',NULL);
INSERT INTO t_area(id,`code`,`name`,pcode) VALUES(NULL,'002','河南省',NULL);
INSERT INTO t_area(id,`code`,`name`,pcode) VALUES(NULL,'003','邯郸市','001');
INSERT INTO t_area(id,`code`,`name`,pcode) VALUES(NULL,'004','石家庄','001');
INSERT INTO t_area(id,`code`,`name`,pcode) VALUES(NULL,'005','郑州市','002');
INSERT INTO t_area(id,`code`,`name`,pcode) VALUES(NULL,'006','洛阳市','002');
INSERT INTO t_area(id,`code`,`name`,pcode) VALUES(NULL,'007','江苏省',NULL);
INSERT INTO t_area(id,`code`,`name`,pcode) VALUES(NULL,'008','南京市','007');
SELECT  * FROM t_area

手写的JQUERY

// 封装一个函数,通过这个函数就可以获取页面中的元素了
function JQuery(selector)//可能时#id或者.class这样的类选择器
{
    if(typeof selector === "string")
    {
        // 设计思路根据CSS语法
        if (selector.charAt(0) === "#")
        {
            // 根据ID获取元素
            //这个是全局对象,是根据我们的ID获取的dom对象
            IE = document.getElementById(selector.substring(1));
            //返回JQuery对象,这个有html方法
            return new JQuery();
        }
    }
    if(typeof selector === "function")
    {
        window.onload = selector;
    }
    //定义一个HTML方法
    this.html = function(htmlStr)
    {
        IE.innerHTML = htmlStr;
    }
    //定义一个click函数代替onclick方法
    this.click = function(fun)
    {
        IE.onclick = fun;
    }
    //下拉栏变化
    this.change = function(fun)
    {
        IE.onchange = fun;
    }
    //由此可知
    this.val = function(value)
    {
        if(value === undefined)
        {
            return IE.value;
        }
        else
        {
            IE.value = value;
        }
    }
    //定义一个静态方法用来发送AJAX请求
    //JS中的静态方法也还是需要有这个对象的
    //传递参数如下,1.传递的数据2.请求方法3.url地址4.是否异步执行
    JQuery.ajax = function(JsonArgs)
    {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function()
        {
            if (this.readyState === 4)
            {
                if (this.status === 200)
                {
                    var JsonObj = JSON.parse(this.responseText);
                    JsonArgs.success(JsonObj);
                }
                else
                {
                    alert(this.status);
                }
            }
        }
        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")
        {
            JsonArgs.type = "GET";
            xhr.open("GET",JsonArgs.url+"?"+JsonArgs.data,JsonArgs.async);
            xhr.send();
        }
    }
}
$ = JQuery;
//执行这个的目的是为了让静态方法能生效
new JQuery();

java后端程序

package com.bjpowernode.AJAX.servlet;
 
import com.alibaba.fastjson.JSON;
import jakarta.servlet.ServletException;
import com.bjpowernode.oa.utils.DBUtil;
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.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
 
@WebServlet("/getAll")
public class GetAllPro extends HttpServlet
{
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
//        链接数据库
        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;
        String sql = null;
        String pcode = request.getParameter("code");
        if(pcode == null)
        {
            sql = "select * from t_area where pcode is null";
        }
        if(pcode != null)
        {
            sql = "select * from t_area where pcode = ?";
        }
        try
        {
            connection = DBUtil.getConnection();
            statement = connection.prepareStatement(sql);
            if(pcode != null)
            {
                statement.setString(1,request.getParameter("code"));
            }
            resultSet = statement.executeQuery();
            List<Area> list = new ArrayList<>();
            while(resultSet.next())
            {
                Area area = new Area();
                area.setId(resultSet.getLong("id"));
                area.setCode(resultSet.getString("code"));
                area.setName(resultSet.getString("name"));
                area.setPcode(resultSet.getString("pcode"));
                list.add(area);
            }
            PrintWriter out = response.getWriter();
            out.println(JSON.toJSONString(list));
        }
        catch (SQLException e)
        {
            throw new RuntimeException(e);
        }
    }
}