jQuery 使用$.ajax()方法进行级联查询

最新推荐文章于 2024-10-06 16:18:14 发布

Leach爱喝星冰乐

最新推荐文章于 2024-10-06 16:18:14 发布

阅读量852

点赞数 5

分类专栏：笔记文章标签： ajax jquery

本文链接：https://blog.csdn.net/m0_55554710/article/details/120217758

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQuery 使用$.ajax()方法进行级联查询

$.ajax()方法可以使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON 同时能够把接收的数据更新到 DOM 对象

$.ajax()语法

$.ajax( { name:value, name:value, ... } )
说明：参数是 json 的数据，包含请求方式，数据，回调方法等
async ： 布尔值，表示请求是否异步处理。默认是 true
contentType ：发送数据到服务器时所使用的内容类型。默认是：
"application/x-www-form-urlencoded"。
data：规定要发送到服务器的数据，可以是：string， 数组，多数是 json
dataType：期望从服务器响应的数据类型。jQuery 从 xml, json, text,, html 这些中测试最可能
的类型
"xml" - 一个 XML 文档
"html" - HTML 作为纯文本
"text" - 纯文本字符串
"json" - 以 JSON 运行响应，并以对象返回
error(xhr,status,error)：如果请求失败要运行的函数, 其中 xhr, status, error 是自定义的形参名
success(result,status,xhr)：当请求成功时运行的函数，其中 result, status, xhr 是自定义的形参
名
type：规定请求的类型（GET 或 POST 等），默认是 GET， get，post 不用区分大小写
url：规定发送请求的 URL。

demo

准备一个html文件和一个java类实现HttpServlet接口并且重写doget方法或者dopost方法

编写一个html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jquery-3.6.0/jquery-3.6.0.js"></script>
</head>
<!--使用jquery和ajax进行异步处理-->
<body>
<!--创建两个选择栏，根据第一个选择栏的选择情况改变第二个选择栏的内容-->
<select id="main">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>
<select id="second">
    <option>1</option>
    <option>1</option>
    <option>1</option>
    <option>1</option>
    <option>1</option>
</select>
</body>
</html>
<script>
    var $getmainselect = $("#main"); //获取第一个选择栏的jquery对象
    var $getsecondselect = $("#second"); //获取第二个选择栏的jquery对象
    var $getsecondoption = $("#second>option"); //获取第二个选择栏的全部选项的jquery对象
    //当第一个选择栏发生改变时进行触发异步级联操作
    $getmainselect.on("change",function (){
        var $getmainselected = $("#main>option:selected")
        $.ajax({
            async:true, 
            data:{"key":$getmainselected.text()},
            dataType:"json",
            error:function (){
                $getsecondselect.empty();
            },
            success:function (data){
                $getsecondoption.text(data.key);
            },
            type:'GET',
            url:"../queryajaxtest"
        })
    })
</script>

编写一个java类实现HttpServlet接口

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
public class QueryAjaxTest extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        /*使用json方式传值*/
        String json="{}"; //当传值为空的时候返回{}
        resp.setContentType("application/json;charset=UTF-8");
        req.setCharacterEncoding("utf-8");
        String key = req.getParameter("key"); //根据参数名获取参数
        /*这里可以加上根据获取到的参数进行数据库查询和处理结果集之类的操作*/
        /*网络上有很多根据类来构建json字符串的jar包 例如：jackson*/
        json = "{\"key\":\""+key+"\"}";  //因为是demo所以我就把参数本身以json方式返回
        PrintWriter out= resp.getWriter();
        out.print(json); //输出流输出
        out.flush();//刷新通道
        out.close();//关闭
    }
}

Servlet注册

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0"
>
    <servlet>
        <servlet-name>queryajaxtest</servlet-name>
        <servlet-class>test01.QueryAjaxTest</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>queryajaxtest</servlet-name>
        <url-pattern>/queryajaxtest</url-pattern>
    </servlet-mapping>
</web-app>