Ajax1day(get,post请求，PostMan测试工具，图书馆里案例，聊天机器人案例)

最新推荐文章于 2024-07-09 14:28:28 发布
最新推荐文章于 2024-07-09 14:28:28 发布
阅读量2.2k 收藏 3
点赞数
分类专栏： javascript 笔记 web笔记 文章标签： 测试工具 postman javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44976531/article/details/125805861
版权
笔记 同时被 3 个专栏收录
45 篇文章 0 订阅
订阅专栏
web笔记
37 篇文章 0 订阅
订阅专栏
javascript
19 篇文章 0 订阅
订阅专栏

文章目录

什么是Ajax

Ajax 的全称是 Asynchronous Javascript And XML(异步JavaScript和XML)。
通俗的理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是Ajax。
在这里插入图片描述
如果要在网页中请求服务器上的数据资源，则需要用到 XMLHttpRequest 对象。
XMLHttpRequest（简称 xhr）是浏览器提供的 js 成员，通过它，可以请求服务器上的数据资源。
最简单的用法 var xhrObj = new XMLHttpRequest()

资源的请求方式

客户端请求服务器时，请求的方式有很多种，最常见的两种请求方式分别为 get 和 post 请求。

  • get 请求通常用于获取服务端资源（向服务器要资源）
    例如：根据 URL 地址，从服务器获取 HTML 文件、css 文件、js文件、图片文件、数据资源等
  • post 请求通常用于向服务器提交数据（往服务器发送资源）
    例如：登录时向服务器提交的登录信息、注册时向服务器提交的注册信息、添加用户时向服务器提交的用户信息等各种数据提交操作

jQuery中的Ajax

浏览器中提供的 XMLHttpRequest 用法比较复杂，所以 jQuery 对 XMLHttpRequest 进行了封装，提供了一系列 Ajax 相关的函数，极大地降低了 Ajax 的使用难度。
jQuery 中发起 Ajax 请求最常用的三个方法如下：

$.get()
$.get(url, [data], [callback])   //[]代表可选而不是数组

在这里插入图片描述
示例：

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

在这里插入图片描述
示例：

$.post(
   'http://www.liulongbin.top:3006/api/addbook', // 请求的URL地址
   { bookname: '水浒传', author: '施耐庵', publisher: '上海图书出版社' }, // 提交的数据
   function(res) { // 回调函数
      console.log(res)
   }
)
$.ajax()

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

$.ajax({
   type: '', // 请求的方式，例如 GET 或 POST
   url: '',  // 请求的 URL 地址
   data: { },// 这次请求要携带的数据
   success: function(res) { } // 请求成功之后的回调函数
})

全部示例：

<!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>
    <script src="./lib/jq.js"></script>  
        <!-- 导入jquery库 -->
</head>
<body>
    <button id="btnGET">发起不带参数的GET请求</button>
    <button id="btnDataGET">发起带参数的GET请求</button>
    <button id="btnDataPost">发起带参数的post请求</button>
    <button id="ajaxDataGET">使用$.ajax发起GET请求</button>
    <button id="ajaxDataPost">使用$.ajax发起post请求</button>
    <script>
        let obj
        $(function () {
            $('#btnGET').on('click', function () {
                $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
                    console.log(res)
                })
            })
        })
        $(function () {
            $('#btnDataGET').on('click', function () {
                $.get('http://www.liulongbin.top:3006/api/getbooks', {id: 999}, function (res) {
                    console.log(res) // 这里的 res 是服务器返回的数据
                })
            })
        })
        $(function () {
            $('#btnDataPost').on('click', function () {
                $.post('http://www.liulongbin.top:3006/api/addbook', {bookname: '桥洞下啊', author: '逮虾户', publisher: '粤港澳'}, function (res) {
                    console.log(res) // 这里的 res 是服务器返回的数据
                })
            })
        })
        $(function () {
            $('#ajaxDataGET').on('click', function () {
                $.ajax({
                    type: 'GET',  //请求的方式
                    url: 'http://www.liulongbin.top:3006/api/getbooks',  // 请求的 URL 地址
                    data: {id: 1},      // 这次请求要携带的数据
                    success: function (res) {  // 请求成功之后的回调函数
                        obj = res
                        console.log(res)
                    },
                })
            })
        })
        $(function () {
            $('#ajaxDataPost').on('click', function () {
                $.ajax({
                    type: 'POST',  //请求的方式
                    url: 'http://www.liulongbin.top:3006/api/addbook',  // 请求的 URL 地址
                    data: { // 要提交给服务器的数据
                        bookname: '事迹',
                        author: '施阿斯顿撒',
                        publisher: '啊实打实社'
                    },
                    success: function (res) {  // 请求成功之后的回调函数
                        console.log(res)
                    },
                })
            })
        })

    </script>
</body>

</html>

接口

使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口(简称接口)。同时，每个接口必须有请求方式。
例如：
http://www.liulongbin.top:3006/api/getbooks 获取图书列表的接口(GET请求)
http://www.liulongbin.top:3006/api/addbook 添加图书的接口（POST请求）

接口测试工具

为了验证能否被正常访问，需要用到接口测试工具对数据接口进行检测。
好处：接口测试工具能在不写任何代码的情况下，对接口进行调用和测试。
在这里插入图片描述
https://www.getpostman.com/downloads/
png)

使用PostMan测试GET接口

在这里插入图片描述

使用PostMan测试POST接口

在这里插入图片描述

接口文档

接口文档，顾名思义就是接口的说明文档，它是我们调用接口的依据。好的接口文档包含了对接口URL，参数以及输出内容的说明，我们参照接口文档就能方便的知道接口的作用，以及接口如何进行调用。
接口文档可以包含很多信息，也可以按需进行精简，不过，一个合格的接口文档，应该包含以下6项内容，从而为接口的调用提供依据：

  1. 接口名称：用来标识各个接口的简单说明，如登录接口，获取图书列表接口等。
  2. 接口URL：接口的调用地址。
  3. 调用方式：接口的调用方式，如 GET 或 POST。
  4. 参数格式：接口需要传递的参数，每个参数必须包含参数名称、参数类型、是否必选、参数说明这4项内容。
  5. 响应格式：接口的返回值的详细描述，一般包含数据名称、数据类型、说明3项内容。
  6. 返回示例（可选）：通过对象的形式，例举服务器返回数据的结构。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

案例 - 图书管理

在这里插入图片描述
用到的 css 库 bootstrap.css
用到的 javascript 库 jquery.js
用到的 vs code 插件 Bootstrap 3 Snippets

部分JS代码

获取图书列表数据;

  1. 发起 ajax 请求获取图书列表数据
  2. 获取列表数据是否成功
  3. 渲染页面结构
  4. 循环拼接字符串
  5. 渲染表格结构
                //获取图书列表数据
                function getBookList() {
                //1. 发起 ajax 请求获取图书列表数据
                    $.get('http://www.liulongbin.![t](https://img-blog.csdnimg.cn/3f931482ba644d2f861d997b9a178815.png)
op:3006/api/getbooks', function (res) {
                        if (res.status !== 200) {   //2. 获取列表数据是否成功
                            return alert('获取数据失败!')
                        }
                        let rows = [] //3. 渲染页面结构
                        $.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:;" class="del" data-id=' + item.id + '>删除</a></td></tr>')
                        })
                        $('#tb').empty().append(rows.join(''))  // 5. 渲染表格结构
                    })
                }
                getBookList()

删除图书信息:

  1. 为按钮绑定点击事件处理函数
  2. 获取要删除的图书的 Id
  3. 发起 ajax 请求，根据 id 删除对应的图书
  4. 删除成功后，重新加载图书列表
                // 因为a链接式动态添加的元素，绑定事件要用父元素。(有点像事件委托)
                $('tbody').on('click', '.del', function () {
                    let id = $(this).attr('data-id')
                    $.ajax({
                        type: 'GET',
                        url: 'http://www.liulongbin.top:3006/api/delbook',
                        data: {id: id},
                        success: function (res) {
                            if (res.status !== 200) return alert(res.status)
                            getBookList()
                        }
                    })
                })

添加图书信息:

  1. 检测内容是否为空
  2. 发起 ajax 请求，添加图书信息
  3. 判断是否添加成功
  4. 添加成功后，刷新图书列表
  5. 清空文本框内容
             // 添加图书信息
                $('#btnAdd').on('click', function () {
                    let bookname = $('#iptBookname').val().trim()
                    let author = $('#iptAuthor').val().trim()
                    let publisher = $('#iptPublisher').val().trim()
                    if (bookname.length <= 0 || author.length <= 0 || publisher.length <= 0) {
                        return alert('填写完成的图书信息!')
                    }
                    else {
                        $.ajax({
                            type: "POST",
                            url: 'http://www.liulongbin.top:3006/api/addbook',
                            data: {"bookname": bookname, "author": author, "publisher": publisher},
                            success: function (res) {
                                if (res.status !== 201) {console.log(res.status)}
                                getBookList()
                                $('#iptBookname').val('')
                                $('#iptAuthor').val('')
                                $('#iptPublisher').val('')
                            },
                        })
                    }
                })

案例 – 聊天机器人

在这里插入图片描述

将用户输入的内容渲染到聊天窗口

    // 初始化右侧滚动条
    // 这个方法定义在scroll.js中
    resetui()
    // 为发送按钮绑定鼠标点击事件
    $('#btnSend').on('click',function(){
        let text=$('#ipt').val().trim()
        if(text.length<=0){
            return $('#ipt').val("")        
        }
    // 如果用户输入了聊天内容，则将聊天内容追加到页面上
    $('#talk_list').append(`<li class="right_word"><img src="img/person02.png" /><span>${text}</span></li>`)
    $('#ipt').val('')
    resetui()
    // 发起请求，获取机器人聊天内容
    getMsg(text)
    })

发起请求获取聊天消息

   function getMsg(text){
        $.ajax({
            method:'GET',
            url:'https://ajax-base-api-t.itheima.net/api/robot',
            data:{
                spoken:text
            },
            success:function(res)
            {  
                if(res.message==='success')
                {
                console.log(res.data.info.text)
                $('#talk_list').append(`<li class="left_word"><img src="img/person01.png"/><span>${res.data.info.text}</span></li>`)
                resetui()
                getVoice(res.data.info.text)
                }
            }
        })

将机器人的聊天内容转为语音

       function getVoice(text){
        $.ajax({
            method:'GET',
            url:'https://ajax-base-api-t.itheima.net/api/synthesize',
            data:{
                text:text
            },
            success:function(res){
            // 如果请求成功，则res.voiceUrl 是服务器返回的音频URL地址
            if(res.status===200){
                $('#voice').attr('src',res.voiceUrl)
                console.log(res)
            }

            else{
                console.log(res)
            }
            }
        }) 
       }

通过audio播放语音

  <audio src="" id="voice" autoplay style="display: none;"></audio>

使用回车发送消息

    // 为文本框钮绑定Enter事件        
    $('#ipt').on('keyup',function(e){
        if(e.key=='Enter'){
            $("#btnSend").click()
        }
        else{
            console.log(e.key)
        }
    })
荻风溪畔
关注
专栏目录
java的get和post接口测试工具_Java-接口自动化测试-Mock模拟Get和POST请求
weixin_39668470的博客
02-17 250
1：Mock简介1.1：Mock可以做什么Mock可以模拟一个http接口的后台响应，就这么简单，可以模拟request、response1.2：如何获取Mock下载Moco Runner standlone:Standalone Moco Runner2：Mock模拟一个Get请求2.1：Mock模拟一个不带参数的Get请求 2.1.1：创建json文件 Test.json[{"descript...
Post，Get请求测试工具
03-12
Post，Get请求测试工具，文档中有详细的使用说明！
支持AJAX应用的测试工具WebKing 6.0
软件工程专栏
09-18 5085
        Parasoft WebKing提供先进的自动化测试解决方案，涵盖功能和回归测试套件的创建、执行和管理等，并能很好支持AJAX 开发模式，完成对AJAX应用的测试。借助WebKing 6.0 可以发现JavaScript 代码中存在的、手工不容易发现的缺陷. WebKing 6.0 提供空前的支持以发布正确无误的、一致的JavaScript应用. 在构建AJAX 应用中，许多开
接口测试，ajax，post ，json data
linhaihai0202的专栏
01-03 1467
接口测试     url: http://localhost:9415/api/paymentservice/payapply/shsocialinsurance request Data: {businessType:1} response Data: function doTest(){ $.aj
【Ajax】GET请求操作实例
日拱一卒無有盡，功不唐捐終入海
12-28 167
初识 Ajax
Razor Profiler：测试AJAX代码工具
大番薯
08-27 1036
 Razor Profiler是一个基于web的AJAX分析工具，帮助web开发者理解和分析JavaScript代码在跨浏览器环境中运行行为。Razor Profiler能够作为一个在线服务，或者下载在本地运行。这个工具由Coach Wei开发，他为Apache的Nexaweb做了大量工作。(Nexaweb是基于Web2.0应用开发的技术，一个简易的开发平台或框架) Razor Profile
postman测试post请求参数为json类型的实例讲解
10-18
**Postman测试POST请求参数为JSON类型实例详解** 在现代Web开发中，API（应用程序编程接口）已经成为构建分布式系统和微服务架构的核心部分。Postman作为一个强大的API测试工具，可以帮助开发者快速、便捷地测试和...
Postman是一款功能强大的接口测试工具，它支持各种HTTP请求方法，包括GET、POST、PUT、DELETE等，并提供了一
最新发布
09-11
postmanPostman是一款功能强大的接口测试工具，它支持各种HTTP请求方法，包括GET、POST、PUT、DELETE等，并提供了一系列丰富的功能来模拟和测试各种网络请求。以下是关于Postman的详细介绍： 一、Postman的主要功能...
Http post请求工具 POSTMAN工具post man请求必备
12-28
POSTMAN是一款广泛使用的HTTP客户端工具，它允许开发者和测试人员进行HTTP请求，包括POST、GET、PUT等多种HTTP方法。在Web开发中，POSTMAN扮演着重要角色，它简化了API接口测试、调试和文档编制的过程。 一、POST...
http测试工具（get和post都可以）
05-13
http测试工具（get和post都可以）
【Ajax】接口与接口测试工具PostMan
早睡早起长头发的博客
01-18 2745
为了验证接口能否被正常被访问，我们常常需要使用接口测试工具，来对数据接口进行检测。好处：接口测试工具能让我们在不写任何代码的情况下，对接口进行调用和测试。接口文档，顾名思义就是接口的说明文档，它是我们调用接口的依据。好的接口文档包含了对接口URL，参数以及输出内容的说明，我们参照接口文档就能方便的知道接口的作用，以及接口如何进行调用。
在线HTTP POST/GET接口测试工具 - aTool在线工具 分类： ...
weixin_34348174的博客
07-27 434
地址：http://www.atool.org/httptest.php 在线接口测试工具 接口测试是测试系统组件间接口的一种测试。接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点。测试的重点是要检查数据的交换，传递和控制管理过程，以及系统间的相互逻辑依赖关系等。 接口测试一般以用于多系统间交互开发，或者拥有多个子系统的应用系统开发的测试。接口...
Http访问方式GET/POST的测试工具Postman
视频技术博客
05-20 3317
Http访问方式GET/POST的测试工具Postman,Chrome浏览器的一个扩展插件Postman，此工具话说还是非常好用的，起码不至于自己写Get或者Post的方法.
在线HTTP POST/GET接口测试工具
shuyeshangdemayi的专栏
09-02 2957
网址：http://www.atool.org/httptest.php
使用Ajax测试post请求方式:
08-14 1498
1.java代码如下: package com.eduask; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest;
AJAX初探测试
Learning_zhang的博客
12-14 166
【代码】AJAX初探测试。
Jmeter-接口测试-GET请求
我的成长历程
07-09 751
使用Ｊｍｅｔｅｒ发起GET请求
Postman测试工具Win64最新版下载
3. HTTP请求：Postman的基本功能是发送各种HTTP请求（包括GET、POST、PUT、DELETE等），并提供了一个可视化的界面来监控和分析请求和响应的数据。这使得开发者能更容易地调试和验证他们的Web服务。 压缩包文件名列...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值