Ajax--初识Ajax--接口和案例 - 图书管理

这篇具有很好参考价值的文章主要介绍了Ajax--初识Ajax--接口和案例 - 图书管理。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Ajax--初识Ajax--接口和案例 - 图书管理

接口的概念

使用 Ajax 请求数据时,被请求的 URL 地址,就叫做数据接口(简称接口)。同时,每个接口必须有请求方式

例如:

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

http://www.liulongbin.top:3006/api/addbook   添加图书的接口(POST请求)

分析接口的请求过程

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

Ajax--初识Ajax--接口和案例 - 图书管理

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

Ajax--初识Ajax--接口和案例 - 图书管理接口测试工具

1. 什么是接口测试工具

为了验证接口能否被正常被访问,我们常常需要使用接口测试工具,来对数据接口进行检测。

好处:接口测试工具能让我们在不写任何代码的情况下,对接口进行调用测试

Ajax--初识Ajax--接口和案例 - 图书管理

2. 下载并安装PostMan

访问 PostMan 的官方下载网址 Download Postman | Get Started for Free,下载所需的安装程序后,直接安装即可。 

Ajax--初识Ajax--接口和案例 - 图书管理

 Ajax--初识Ajax--接口和案例 - 图书管理

 使用PostMan测试GET接口

步骤:

1.选择请求的方式

2.填写请求的URL地址

3.填写请求的参数

4.点击 Send 按钮发起 GET 请求

5.查看服务器响应的结果

Ajax--初识Ajax--接口和案例 - 图书管理

get要在Params下添加参数 

使用PostMan测试POST接口

步骤:

1.选择请求的方式

2.填写请求的URL地址

3.选择 Body 面板并勾选数据格式

4.填写要发送到服务器的数据

5.点击 Send 按钮发起 POST 请求

6.查看服务器响应的结果

Ajax--初识Ajax--接口和案例 - 图书管理

 接口文档

1. 什么是接口文档

接口文档,顾名思义就是接口的说明文档,它是我们调用接口的依据。好的接口文档包含了对接口URL参数以及输出内容的说明,我们参照接口文档就能方便的知道接口的作用,以及接口如何进行调用。

2. 接口文档的组成部分

接口文档可以包含很多信息,也可以按需进行精简,不过,一个合格的接口文档,应该包含以下6项内容,从而为接口的调用提供依据:

1. 接口名称用来标识各个接口的简单说明,如登录接口获取图书列表接口等。

2. 接口URL:接口的调用地址。

3. 调用方式:接口的调用方式,如 GET POST

4. 参数格式:接口需要传递的参数,每个参数必须包含参数名称参数类型是否必选参数说明4项内容。

5. 响应格式:接口的返回值的详细描述,一般包含数据名称数据类型说明3项内容。

6. 返回示例(可选):通过对象的形式,例举服务器返回数据的结构。

3. 接口文档示例

Ajax--初识Ajax--接口和案例 - 图书管理

Ajax--初识Ajax--接口和案例 - 图书管理 Ajax--初识Ajax--接口和案例 - 图书管理

案例 - 图书管理

渲染UI结构

Ajax--初识Ajax--接口和案例 - 图书管理 案例用到的库和插件

用到的 css bootstrap.css

用到的 javascript jquery.js

用到的 vs code 插件 Bootstrap 3 Snippets

Ajax--初识Ajax--接口和案例 - 图书管理Ajax--初识Ajax--接口和案例 - 图书管理 输入panel panel可以快捷生成

Ajax--初识Ajax--接口和案例 - 图书管理

 panel-body输入Ajax--初识Ajax--接口和案例 - 图书管理

又快速生成了

Ajax--初识Ajax--接口和案例 - 图书管理 在 <div class="panel panel-primary">输入form-inline就可以实现在同一行

 Ajax--初识Ajax--接口和案例 - 图书管理

输入bs3-table选择有边框的快速生成 

 Ajax--初识Ajax--接口和案例 - 图书管理

渲染图书列表(核心代码)

function getBookList() {
    // 1. 发起 ajax 请求获取图书列表数据
    $.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
        // 2. 获取列表数据是否成功
        if (res.status !== 200) return alert('获取图书列表失败!')
        // 3. 渲染页面结构
        var rows = []
        $.each(res.data, function(i, item) { // 4. 循环拼接字符串
            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>')
        })
        $('#bookBody').empty().append(rows.join('')) // 5. 渲染表格结构
    })
}

Ajax--初识Ajax--接口和案例 - 图书管理 遍历的对象是res.data

 rows的值为Ajax--初识Ajax--接口和案例 - 图书管理

 删除图书(核心代码)

// 1. 为按钮绑定点击事件处理函数
$('tbody').on('click', '.del', function() {
    // 2. 获取要删除的图书的 Id
    var id = $(this).attr('data-id')
    $.ajax({ // 3. 发起 ajax 请求,根据 id 删除对应的图书
        type: 'GET',
        url: 'http://www.liulongbin.top:3006/api/delbook',
        data: { id: id },
        success: function(res) {
            if (res.status !== 200) return alert('删除图书失败!') 
            getBookList() // 4. 删除成功后,重新加载图书列表
        }
    })
})
$('.del').on('click',function(){
               console.log('ok');
           })

这样绑定是无效的,因为a是后面添加生成的,页面是没有存在的,因此我们要用数据代理的方式,也就它的父元素tbody,因为tbody一开始就是存在的

 $('tbody').on('click','.del')

这句话的意思就是tbody代理.del生成事件 

Ajax--初识Ajax--接口和案例 - 图书管理  添加图书(核心代码)

// 1. 检测内容是否为空
var bookname = $('#bookname').val()
var author = $('#author').val()
var publisher = $('#publisher').val()
if (bookname === '' || author === '' || publisher === '') {
    return alert('请完整填写图书信息!')
}
// 2. 发起 ajax 请求,添加图书信息
$.post(
    'http://www.liulongbin.top:3006/api/addbook',
    { bookname: bookname, author: author, publisher: publisher },
    function(res) {
        // 3. 判断是否添加成功
        if (res.status !== 201) return alert('添加图书失败!')
        getBookList() // 4. 添加成功后,刷新图书列表
        $('input:text').val('') // 5. 清空文本框内容
    }
)

Ajax--初识Ajax--接口和案例 - 图书管理文章来源地址https://www.toymoban.com/news/detail-411299.html

到了这里,关于Ajax--初识Ajax--接口和案例 - 图书管理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 7.4 SpringBoot实战图书详情相关接口(管理员端)

    在前面的API开发中,有一些朋友私信我对定义的VO、BO、PO对象存在疑问,不太明白各层定义的对象的好处!都是失血或贫血对象,对象的字段又很相近,传递时拷贝来拷贝去,感觉用起来更麻烦,这么做到底有什么好处呢? 你是否有什么类似的疑问?对于没有实际案例场景的

    2024年02月15日
    浏览(39)
  • AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(五)—— 项目-新闻头条-数据管理平台-ajax综合案例前端

    愿许秋风知我意,解我心中意难平。 推荐使用, 每个程序员都有自己的管理方式。 HTML结构: 1.为什么要提取公共前缀地址(基地址),因为公司业务可能会更换服务器,如果你不想一条一条地修改请求地址的话。 后续使用axios时,url不需要再写前缀。 2.请求成功与失败 成

    2024年01月25日
    浏览(52)
  • 【项目案例】前后端分离项目 【Web图书管理系统 】SpringBoot + Vue + Element UI + Mysql

    👉 博主介绍 : 博主从事应用安全和大数据领域,有8年研发经验,5年面试官经验,Java技术专家,WEB架构师,阿里云专家博主,华为云云享专家,51CTO 专家博主 Java知识图谱点击链接: 体系化学习Java(Java面试专题) 💕💕 感兴趣的同学可以收藏关注下 , 不然下次找不到哟

    2024年02月07日
    浏览(51)
  • 图书管理系统登录页面--课后程序(Python程序开发案例教程-黑马程序员编著-第12章-课后作业)

    登录与注册是程序中最基本的模块。用户只有登录成功后,才可以使用应用系统中的全部功能。若用户没有登录账号,可通过注册界面设置登录账号信息。某图书管理系统的登录窗口如图1所示。   登录界面 图1的窗口中包含用户名、密码、验证码、登录、注册、退出。当用户

    2024年02月03日
    浏览(52)
  • 【大学生体质】图书管理系统(Vue+SpringBoot2)-完整部署教程【课设OR毕设提供API接口文档、数据库文件、README.MD、部署视频】

    本项目拥有完整的API后台接口文档(文尾) 项目部署视频正在录制 如果项目对您有所帮助,可以Star⭐一下,受到鼓励的我会继续加油。 项目在线演示地址 项目前端地址 项目后端地址 项目部署视频 ☃️前端主要技术栈 技术 作用 版本 Vue 提供前端交互 2.6.14 Vue-Router 路由式编

    2024年01月18日
    浏览(54)
  • Ajax-概念、Http协议、Ajax请求及其常见问题

    其他AJAX知识 AJAX同源策略及跨域问题解决方案——点击此处 AJAX请求的不同发送方式——点击此处 AJAX 全称为Asynchronous Javascript And XML,就是 异步的JS和XML 。通过AJAX 可以在浏览器中向服务器发送异步请求,最大的优势: 无刷新获取数据 。AJAX 不是新的编程语言,而是一种将现

    2024年02月13日
    浏览(40)
  • Ajax 笔记(二)—— Ajax 案例

    Ajax 笔记: Ajax 笔记(一)—— Ajax 入门 Ajax 笔记(二)—— Ajax 案例 Ajax 笔记(三)—— Ajax 原理 Ajax 笔记(四)—— Ajax 进阶 Ajax 笔记接口文档: https://apifox.com/apidoc/shared-fa9274ac-362e-4905-806b-6135df6aa90e/doc-842135 2.1.1 渲染列表 获取数据的时候,需要给自己起一个外号。由于都

    2024年02月13日
    浏览(36)
  • 【Ajax】笔记-Ajax案例准备与请求基本操作

    按钮+div 服务端简单修改:路由规则:/server 结尾的请求。 点击按钮请求服务器把响应体返回到div中。 修改HTML node server.js 请求参数

    2024年02月15日
    浏览(35)
  • 【原生Ajax】全面了解xhr的概念与使用。

    ✍️ 作者简介: 前端新手学习中。 💂 作者主页: 作者主页查看更多前端教学 🎓 专栏分享:css重难点教学   Node.js教学 从头开始学习   ajax学习 xhr是浏览器提供的JavaScript对象,通过它,可以请求服务器上的数据资源,之前所学的jquery的ajax函数,就是基于xhr对象封装出来的。

    2024年02月02日
    浏览(38)
  • 〖Python网络爬虫实战㉔〗- Ajax数据爬取之Ajax 分析案例

    订阅:新手可以订阅我的其他专栏。免费阶段订阅量1000+                 python项目实战                  Python编程基础教程系列(零基础小白搬砖逆袭) 说明:本专栏持续更新中,目前专栏免费订阅,在转为付费专栏前订阅本专栏的,可以免费订阅付费专栏,

    2024年02月07日
    浏览(72)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包