初识Ajax

参数名	参数类型	是否必选	说明
url	string	是	要请求的资源地址
data	object	否	请求资源期间要携带的参数
callback	function	否	请求成功时的回调函数

$.get()发起不带参数的请求

$.get('http://www.liulongbin.top:3006/api/getbooks', function(res) { console.log(res) // 这里的 res 是服务器返回的数据 })

$.get()发起带参数的请求

$.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function(res) { console.log(res) })

3.2.$.post()函数的语法

jQuery 中 $.post() 函数的功能单一，专门用来发起 post 请求，从而向服务器提交数据。 $.post()

函数的语法如下：

$.post(url, [data], [callback])

其中，三个参数各自代表的含义如下：

参数名	参数类型	是否必选	说明
url	string	是	提交数据的地址
data	object	否	要提交的数据
callback	function	否	数据提交成功时的回调函数

$.post()向服务器提交数据

代码演示：

$.post('http://www.liulongbin.top:3006/api/addbook', { bookname: '都市猎人', author: '杀手不太冷', publisher: '网络说' }, function (res) { console.log(res); });

3.3 $.ajax()函数的语法

相比于 $.get() 和 $.post() 函数，jQuery 中提供的 $.ajax() 函数，是一个功能比较综合的函数，它

允许我们对 Ajax 请求进行更详细的配置。

$.ajax() 函数的基本语法如下：

$.ajax({

         type: '', // 请求的方式，例如 GET 或 POST

url: '', // 请求的 URL 地址 data: { },// 这次请求要携带的数据

         success: function(res) { } // 请求成功之后的回调函数

})

4、接口

4.1 接口的概念

使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称接口）。同时，每个接口必须

有请求方式。

例如：

http://www.liulongbin.top:3006/api/getbooks 获取图书列表的接口(GET请求) http://www.liulongbin.top:3006/api/addbook 添加图书的接口（POST请求）

4.2 分析接口的请求过程

1. 通过GET方式请求接口的过程

2. 通过POST方式请求接口的过程

4.3 接口测试工具

下载并安装PostMan

访问 PostMan 的官方下载网址 https://www.getpostman.com/downloads/，下载所需的安装程序

后，直接安装即可。

4.4接口文档

接口文档，顾名思义就是接口的说明文档，它是我们调用接口的依据。好的接口文档包含了对接口

URL，参数以及输出内容的说明，我们参照接口文档就能方便的知道接口的作用，以及接口如何进

行调用。

5、案例 - 图书管理

用到的 css 库 bootstrap.css

用到的 javascript 库 jquery.js

用到的 vs code 插件 Bootstrap 3 Snippets

html代码：

<body style="padding: 15px;">

    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加新图书</h3>
        </div>
        <div class="panel-body form-inline">
            <div class="input-group">
                <div class="input-group-addon">书名</div>
                <input type="text" class="form-control" id="iptBookname" placeholder="请输入书名">
            </div>
            <div class="input-group">
                <div class="input-group-addon">书名</div>
                <input type="text" class="form-control" id="iptBookname" placeholder="请输入作者">
            </div>
            <div class="input-group">
                <div class="input-group-addon">书名</div>
                <input type="text" class="form-control" id="iptBookname" placeholder="请输入出版社">
            </div>
        </div>
    </div>
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>id</th>
                <th>书名</th>
                <th>作者</th>
                <th>出版社</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

</body>

JS代码：

$(function () {
    //添加图书
    $('#btnAdd').on('click', function () {
        var iptBookname = $('#iptBookname').val().trim();
        var iptBookauthor = $('#iptBookauthor').val().trim();
        var iptBookpublisher = $('#iptBookpublisher').val().trim();
        if (!(iptBookname && iptBookauthor && iptBookpublisher)) return alert('亲，重新填写哦');
        //添加数据
        addData(iptBookname, iptBookauthor, iptBookpublisher);
        //渲染数据
        getData();
        $('#iptBookname').val('');
        $('#iptBookauthor').val('');
        $('#iptBookpublisher').val('');
    });
    //删除图书
    $('#tbd').on('click', 'a', function () {
        var index = $(this).attr('data-index');
        // console.log(index);
        $.get('http://www.liulongbin.top:3006/api/delbook', {
            id: index
        }, function (res) {
            if (res.status !== 200) return alert('删除图书失败');
            //重新渲染数据
            getData();
        })
    })
    //页面一加载就开始渲染数据
    getData();
    //封装一个函数，用来获取服务器的的数据并渲染数据
    function getData() {
        $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
            // console.log(res);
            if (res.status !== 200) return alert('获取图书列表失败');
            $('#tbd').empty();
            $.each(res.data, function (i, item) {
                $('#tbd').append(`<tr><td>${item.id}</td><td>${item.bookname}</td><td>${item.author}</td><td>${item.publisher}</td><td><a href = "javascript:;" data-index = "${item.id}">删除</a></td></tr>`)
            })
        })
    };
    //封装一个函数，用来向服务器的添加数据
    function addData(bookname, author, publisher) {
        $.post('http://www.liulongbin.top:3006/api/addbook', {
            bookname: bookname,
            author: author,
            publisher: publisher
        }, function (res) {
            if (res.status !== 201) return alert('添加图书失败');
        });
    }
})

演示结果：

Lotus_fragrance

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识Ajax

目录1、网页中如何请求数据2、了解Ajax2.1. 什么是Ajax2.2、为什么要学Ajax3、 jQuery中的Ajax3.1.$.get()函数的语法3.2.$.post()函数的语法 3.3 $.ajax()函数的语法4、接口4.1 接口的概念4.2 分析接口的请求过程 4.3 接口测试工具 4.4接口文档5、案例 - 图书管理#博学谷IT学习技术支持#数据，也是服务器对外提供的一种资源。只要是资源，必然要通过请求 – 处理 – 响应的方式进行获取。如果要在网页中请求服务器上的数据资源，则需要用到
复制链接

扫一扫