前端学习--Ajax(1) get/post

news2024/11/20 0:38:42

一、客户端和服务器

上网的目的：借助互联网获取和消费资源

1.1 服务器

负责存放和对外提供资源的计算机

1.2 客户端

负责获取和消费资源的计算机

二、URL地址

2.1 概念

Uniform Resource Locator 中文叫统一资源定位符，标识互联网上每一个资源的存放位置

浏览器通过URL定位资源的存放位置，从而访问资源

2.2 组成

客户端与服务器的通信协议
存有该资源的服务器名称
资源在服务器上存放的具体位置‘

三、客户端与服务器的通信过程

3.1 请求--处理--响应

3.2 基于浏览器的开发者工具分析通信过程

四、服务器提供的资源

4.1 资源类型

文字、图片、视频、音频

数据是网页的灵魂

4.2 请求数据

XMLHttpRequest对象，请求服务器上的数据资源

4.3 请求方式

get -- 获取服务器资源

post -- 向服务器提交数据

五、Ajax

5.1 概念

利用XMLHttpRequest对象和服务器进行交互的方式

5.2 应用场景

用户名重复检测
搜索提示，动态加载搜索数据提示列表
数据分页显示
数据增删改查

六、jQuery中的Ajax

6.1 概念

jQuery对Ajax进行封装，屏蔽了不同浏览器之间的兼容性，降低Ajax使用难度

6.2 $.get()

$.get(url[, data[, callback]])
//url string 请求的资源地址
//data object 请求资源期间携带的参数
//callback 请求成功的回调函数

    //不带参数的get请求
    <button id="btnGET">发起get请求</button>
    <script src="../lib/jquery.js"></script>
    <script>
        $(function(){
            $('#btnGET').on('click',function(){
                $.get('http://www.liulongbin.top:3006/api/getbooks',function(res){
                    console.log(res)
                })
            })
        })
    </script>

    
    //带参数的get请求
    <button id="btnGETInfo">发起get请求</button>
    <script src="../lib/jquery.js"></script>
    <script>
        $(function(){ //当dom元素被创建在script语句下面时要用到入口函数
            $('#btnGETInfo').on('click',function(){
                $.get('http://www.liulongbin.top:3006/api/getbooks',{id:1},function(res){
                    console.log(res)
                })
            })
        })
    </script>

6.3 $.post()

$.post(url[, data[, callback]])
//url string 提交的资源地址
//data object 提交的数据
//callback 提交成功的回调函数

    <button id="btnPOST">发起post请求</button>
    <script src="../lib/jquery.js"></script>
    <script>
        $(function(){ //当dom元素被创建在script语句下面时要用到入口函数
            $('#btnPOST').on('click',function(){
                $.post('http://www.liulongbin.top:3006/api/addbook',{bookname:'2023日记',author:'august',publisher:'八月洋槐出版社'},function(res){
                    console.log(res)
                })
            })
        })
    </script>

6.4 $.ajax()

功能更加综合

$.ajax({
    type: '', //请求方式 get/post
    url: '',
    data: '', //请求携带的数据
    success: function(res){ } //请求之后的回调函数
})

七、接口

7.1 概念

被请求的url就是数据接口，每个接口必须有请求方式

7.2 接口测试工具PostMan

7.3 接口文档

接口的调用依据

案例-图书管理

css是自己写的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/04-index.css">
</head>
<body>
    <div class="header">
        <div class="title">
            <h3>添加新图书</h3>
        </div>
        <div class="form">
            <ul>
                <li>
                    <span>书名</span>
                    <input id="bookname" type="text" placeholder="  请输入书名">
                </li>
                <li>
                    <span>作者</span>
                    <input id="author" type="text" placeholder="  请输入作者">
                </li>
                <li>
                    <span>出版社</span>
                    <input id="publisher" type="text" placeholder="  请输入出版社">
                </li>
            </ul>
            <button id="add">添加</button>
        </div>
    </div>
    <div class="body">
        <table border="1">
            <thead>
                <tr>
                    <th>id</th>
                    <th>书名</th>
                    <th>作者</th>
                    <th>出版社</th>
                    <th>操作</th>
                </tr>
             </thead>
             <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
             </tbody>
        </table>
    </div>
    <script src="../lib/jquery.js"></script>
    <script>
        const tbody = document.querySelector('.body tbody')
        function getBookList(){
            $.get('http://www.liulongbin.top:3006/api/getbooks',function(res){
                if(res.status !== 200)return alert('获取列表失败！')
                console.log(res)
                let rows = []
                $.each(res.data, function(i,item){
                    rows.push(`<tr>
                                <td>${item.id}</td>
                                <td>${item.bookname}</td>
                                <td>${item.author}</td>
                                <td>${item.publisher}</td>
                                <td><a href="javascript:;">删除</a></td>
                            </tr>`)
                })
                tbody.innerHTML = rows.join('')
            })
        }
        getBookList()

        //删除图书
        $('tbody').on('click', 'a', function() {
            let id = this.parentNode.parentNode.children[0].innerHTML
            $.ajax({
                type: 'GET',
                url: 'http://www.liulongbin.top:3006/api/delbook',
                data: { id: id },
                success: function(res) {
                    if (res.status !== 200) return alert(res.msg) 
                    getBookList()
                }
            })
        })

        //添加图书
        $('.form').on('click', '#add', function() {
            let bookname = $('#bookname').val()
            let author = $('#author').val()
            let publisher = $('#publisher').val()
            if (bookname === '' || author === '' || publisher === '') {
                return alert('请完整填写图书信息！')
            }
            $.post(
                'http://www.liulongbin.top:3006/api/addbook',
                { bookname: bookname, author: author, publisher: publisher },
                function(res) {
                    if (res.status !== 201) return alert(res.msg)
                    getBookList() // 4. 添加成功后，刷新图书列表
                    $('input:text').val('') // 5. 清空文本框内容
                }
            )
        })

    </script>
</body>
</html>