Jquery-Ajax使用笔记

介绍

通过图书管理和聊天机器人详细介绍JQ中Ajax使用方法，以及后端给到的各种形式api闭坑

最近学习了Jquery中封装的Ajax，2023年都说JQ已经过时了，虽然我没去学不过看起来还蛮好理解的，JQ有啥不懂请自行查阅。

框架

BootStrap5
Jquery
Ajax

图书管理

案例测试：http://117.50.192.175/LibraryManagement

Get获取图书列表

使用$.get获取图书列表，可以带参也可以不带

后端提供的接口：http://ajax-api.itheima.net/api/books

下面我将展示我的图书管理渲染获取图书数据的过程：
这里我只展示不带参数传递的案例

/* 渲染页面数据 */
function RenderTableData() {
    $.get('http://ajax-api.itheima.net/api/books', res => {
        const { message, data } = res;
        message.match('成功') ? console.log("查询图书列表成功！") : console.log("查询图书列表失败！");
        //document.querySelector("tbody").innerHTML = ;
        $("tbody").html(data.reduce((pre, cur) => {
            const { id, bookname, author, publisher } = cur;
            return [...pre, `
            <tr style="line-height: 38px;">
                <th scope="row">${id}</th>
                <td>${bookname}</td>
                <td>${author}</td>
                <td>${publisher}</td>
                <td><button type="button" data-id=${id} class="btn btn-danger" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-html="true" data-bs-title="<b>删除后数据将无法找回！</b>">Delete</button></td>
            </tr>
            `];
        }, []).join(''));

        UpdateTooltip();
    });

}

/* 获取图书延迟100ms */
setTimeout(() => {
    RenderTableData();
}, 100);

另外多说一句入口函数的题外话，所谓入口函数只要我们写的地方在脚本执行的底部压根不需要理会这东西

Post添加图书数据

使用$.post函数

API接口-http://ajax-api.itheima.net/api/books

图书添加案例：

/* 上传图书数据 */
$("#submit").on('click', function () {
    /* 获取input元素内容 */
    const bookname = $("#bookname").val();
    const author = $("#author").val();
    const publisher = $("#publisher").val();

    const arr = [bookname, author, publisher];
    console.log(arr);
    const pattern = /^[^【】\(\)\[\]]{2,10}$/;
    for (let v of arr) {
        if (!pattern.test(v.trim())) {
            console.log("无法通过");

            ShowToast('submitNotAgree');
            return;
        }
    }

    /* 通过条件检测，继续执行 */
    /* 上传数据到服务器 */
    $.post('http://ajax-api.itheima.net/api/books', { bookname: bookname, author: author, publisher: publisher }, res => {
        const { message, data } = res;
        if (message.match("成功")) {
            //dataPostSuccess
            ShowToast('dataPostSuccess');

            /* 刷新数据 */
            RenderTableData();
        }
    });
	// 这里我用了remove移除tooltip是因为有个bug，当点击提交之后提示信息不会消失，点其他地方也没用
	// 故此我将它强制性移除，不影响后面使用
    $(".tooltip").remove();
});

Delete移除图书（路径变量闭坑）

需要使用$.ajax()，因为前面.get和.post都是具有针对性请求方式的，而ajax可以自定义

$.ajax({          
       	 url:"发送请求（提交或读取数据）的地址", 
         dataType:"预期的服务器响应的数据类型",  	//不填时自动判断
         type:"请求方式",    // 如果你使用jQuery 1.9.0 之后的版本，建议你使用method选项
         async:"true/false",	//默认为true
         data:{发送到/读取后台（服务器）的数据},
         success: () => {请求成功时执行},      
         error: () => {请求失败时执行}
});

参数较多，如有不懂请自行查阅

后端接口：http://ajax-api.itheima.net/api/books/:id

这里需要注意，我在这里也是踩了坑的，因为后端提供的接口后面带了个:id，我就不太明白，直接像正常一样调用，将id的值写到了data里面，但是导致服务器报错500，这并非服务器那边的问题，而是传的参数问题，我们需要更改:id为id的值

案例：

/* 事件委托绑定动态事件，删除某项图书 */
$("tbody").on('click', e => {
    const { target, target: { tagName, dataset } } = e;
    if (tagName === "BUTTON") {
        // console.log(dataset.id);
        $.ajax({
            url: `http://ajax-api.itheima.net/api/books/${dataset.id}`,
            method: 'Delete'
        });
        target.parentElement.parentElement.remove();
        $(".tooltip").remove();
        ShowToast('dataDeleteSuccess');
    }
});

POST文件上传

/* 判断是否选择文件 */
/* 注意：这里formFile是我用jquery获取的元素查询对象，众所周知，它是个数组，而里面0的位置就是我们实际的JS元素，怕误导特别说明一下 */
if (formFile[0].files.length <= 0) return alert("请选择文件！");

const data = formFile[0].files[0];

/* 限制文件类型image */
if (!data.type.match("image")) return alert("文件格式错误，请上传image/*");

/* form表单数据追加 */
const formData = new FormData();
formData.append("avatar", data);

$.ajax({
    method: "POST",
    url: "http://ajax-api.itheima.net/api/file",
    data: formData,
    /* Content-Type由FormData自动选择，在这里务必改为false */
    contentType: false,
    /* 使用FormData上传文件不需要进行数据处理，应将原数据直接上传 */
    processData: false,
    success: (res) => {
        /* 此区域返回值具体步骤由后端响应值决定 */
        const {message, data: {url}} = res;
        if (message.match("成功")) {
            // showImg
            showImg.attr("src", url);
        }
    }
});

DEMO演示：http://117.50.192.175/UploadsImage
在这里如果不明白FormData的作用，可以移步另一篇原生XHR中有讲解
CSDN | FormData辅助上传数据 - 码农张先生

Postman接口测试工具

一款很方便的接口测试工具，不用写代码，同时如果我们接口调用有问题还有一定概率通过对比来帮我们排查
地址：https://www.postman.com/

聊天机器人

聊天机器人提供的接口只有Get，没啥好说的
后端接口：http://ajax-api.itheima.net/api/robot

体验地址：http://117.50.192.175/VritualGirl

END

---