AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【前端】使用jQuery实现一个简单的在线页面或API接口请求功能

2023-01-15 405
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 对于测试人员来说，借助一些测试工具非常的重要，像postman等工具，很方便就能发起api接口的请求和测试 但是，对于开发人员来说，有时候未必一开始就使用这些工具，有可能电脑原因未安装到这些工具或者太麻烦 基于这样一个情况，本篇文章就来简单实现下在线页面发起http的get或post请求的功能作者：全栈小5链接：https://juejin.cn/post/7107132057263800327来源：稀土掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
作者：小5聊基础
简介：一只喜欢全栈方向的程序员，欢迎咨询，尽绵薄之力答疑解惑
编程原则：Write Less Do More
  • 效果

image.png

image.png

image.png

【布局可参考】

可以参考之前写好的文章 <br/>
【前端】使用jQuery封装一套UI组件 - 单选框

【界面设计】

1）整体左边布局，左边为标题，右边为具体值 <br/>
加一个格式化，默认html和body都会有一定的内边距和外边距值 <br/>
默认谷歌浏览器的body外边距为8px，不同浏览器可能外边距值不一样，所以需要统一格式为0px
image.png

html,body{margin:0;padding:0;} <br/>

image.png

2）请求协议，http和https选项切换

3）请求类型，Get和Post选项切换

4）请求地址，行高无法对input元素进行垂直居中，这里有个技巧

  • 默认没法垂直居中

即使加了一个vertical-align样式也无效 <br/>
image.png

  • 设置选择器样式
.cell-div:before {
    content: '';
    vertical-align: middle;
    display: inline-block;
}

image.png

5）优化一下输入框，如下 <br/>
去掉背景，去掉边框，去掉焦点时边框的高亮outline，只保留底部边框 <br/>
image.png

.input {
    vertical-align: middle;
    background: none;
    border: none;
    outline: none;
    padding-bottom:5px;
    border-bottom:1px solid #ccc;
}

6）表头值设置，一般会传递token等值 <br/>
image.png

<style type="text/css">
.before-div:before {
    content: '';
    vertical-align: middle;
    display: inline-block;
}
</style>
<div style="width:100%;display:flex;height:40px;line-height:40px;border-bottom: 1px solid #ccc;">
    <div class="before-div" style="width:100%;">
        <span style="font-size:14px;color:#666;">键</span>
        <input style="width:70%;border:none;background:none;outline:none;" />
    </div>
    <div class="before-div" style="width:100%;">
        <span style="font-size:14px;color:#666;">值</span>
        <input style="width:70%;border:none;background:none;outline:none;" />
    </div>
</div>

7)json参数文本框 <br/>
8）发起请求按钮 <br/>

【实现逻辑】

1）定义一个页面全部变量 <br/>
变量保存请求协议，请求类型-get/post、请求地址、json值 <br/>

var page_info = {
    httpType: 'http',
    requestType: 'get',
    requestUrl: '',
    jsonValue: ''
}

2）绑定文本框keyup事件和单选框点击事件，用于保存值到全局变量里 <br/>

// 请求地址
$("#url").keyup(function () {
    var value = $(this).val();
    page_info.requestUrl = value;
});
// 请求类型
$(".radio-request").click(function () {
    var value = $(this).attr("data-value");
    $(".radio-request").removeClass('radio-action-div');
    $(this).addClass('radio-action-div');
    page_info.httpType = value;
});

3）绑定发起请求按钮点击事件，使用ajax发起请求 <br/>
不管请求是否成功，均显示弹窗并显示返回的信息，以html方式显示 <br/>

// 发起请求
$("#btnInput").click(function () {
    console.log(page_info)

    $.ajax({
        url: page_info.httpType + "://" + page_info.requestUrl,
        data: page_info.jsonValue,
        dataType: 'html',
        type: page_info.requestType,
        success: function (result) {

            $("#infoDiv").show();
            $('#contentDiv').text(result);
        },
        error: function (result) {

            $("#infoDiv").show();
            $('#contentDiv').text(result.responseText == undefined ? result.statusText : result.responseText);
        }
    });
});

4）关闭弹窗 <br/>

// 关闭弹窗
$("#close").click(function () {
    $("#infoDiv").hide();
});

【全部代码】

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<style type="text/css">
    html, body {
        margin: 0;
        padding: 0;
        font-size: 15px;
    }

    .radio-div {
        display: inline-block;
        cursor: pointer;
        margin-right: 10px;
    }

        .radio-div .icon {
            vertical-align: middle;
            display: inline-block;
            width: 14px;
            height: 14px;
            border-radius: 14px;
            background: #fff;
            border: 1px solid #ccc;
        }

        .radio-div .text {
            vertical-align: middle;
        }

    .radio-action-div .icon {
        border: 1px solid #099dff;
        position: relative;
    }

        .radio-action-div .icon::after {
            content: ' ';
            position: absolute;
            top: 3px;
            left: 3px;
            width: 8px;
            height: 8px;
            border-radius: 8px;
            display: inline-block;
            background: #099dff;
        }

    .radio-action-div .text {
        color: #099dff;
    }

    .row-div {
        width: 100%;
        height: 40px;
        line-height: 40px;
        display: flex;
    }

    .cell-div {
        width: 96%;
        padding: 0 2%;
    }

    .cell-1-div {
        width: 30%;
        text-align: right;
    }

    .cell-2-div {
        width: 70%;
    }

    .cell-div:before, .before-div:before {
        content: '';
        vertical-align: middle;
        display: inline-block;
    }

    .input {
        vertical-align: middle;
        background: none;
        border: none;
        outline: none;
        padding-bottom: 5px;
        border-bottom: 1px solid #ccc;
        width: 96%;
    }

    .textarea {
        vertical-align: middle;
        background: none;
        border: none;
        outline: none;
        padding-bottom: 5px;
        border-bottom: 1px solid #ccc;
        width: 96%;
    }
</style>

<!--行列布局-->
<div class="row-div" style="border-bottom:1px solid #ccc;height:50px;line-height:50px;">
    <div class="cell-div" style="width:100%;text-align:center;">
        <span>在线请求测试</span>
    </div>
</div>
<!--行列布局-->
<div class="row-div">
    <div class="cell-div cell-1-div">
        <span>请求协议：</span>
    </div>
    <div class="cell-div cell-2-div">
        <!--单选框-->
        <div class="radio-div radio-action-div radio-http" data-value="http">
            <span class="icon"></span>
            <span class="text" style="">http</span>
        </div>
        <!--单选框-->
        <div class="radio-div radio-http" data-value="https">
            <span class="icon"></span>
            <span class="text" style="">https</span>
        </div>
    </div>
</div>
<!--行列布局-->
<div class="row-div">
    <div class="cell-div cell-1-div">
        <span>请求类型：</span>
    </div>
    <div class="cell-div cell-2-div">
        <!--单选框-->
        <div class="radio-div radio-request radio-action-div" data-value="get">
            <span class="icon"></span>
            <span class="text" style="">Get</span>
        </div>
        <!--单选框-->
        <div class="radio-div radio-request" data-value="post">
            <span class="icon"></span>
            <span class="text" style="">Post</span>
        </div>
    </div>
</div>
<!--行列布局-->
<div class="row-div" style="min-height:40px;height:auto;">
    <div class="cell-div cell-1-div">
        <span>表头值：</span>
    </div>
    <div class="cell-div cell-2-div">
        <div style="width:100%;display:flex;height:40px;line-height:40px;border-bottom: 1px solid #ccc;">
            <div class="before-div" style="width:100%;">
                <span style="font-size:14px;color:#666;">键</span>
                <input style="width:70%;border:none;background:none;outline:none;" />
            </div>
            <div class="before-div" style="width:100%;">
                <span style="font-size:14px;color:#666;">值</span>
                <input style="width:70%;border:none;background:none;outline:none;" />
            </div>
        </div>
        <div style="width:100%;display:flex;height:40px;line-height:40px;border-bottom: 1px solid #ccc;">
            <div class="before-div" style="width:100%;">
                <span style="font-size:14px;color:#666;">键</span>
                <input style="width:70%;border:none;background:none;outline:none;" />
            </div>
            <div class="before-div" style="width:100%;">
                <span style="font-size:14px;color:#666;">值</span>
                <input style="width:70%;border:none;background:none;outline:none;" />
            </div>
        </div>
        <div style="width:100%;display:flex;height:40px;line-height:40px;border-bottom: 1px solid #ccc;">
            <div class="before-div" style="width:100%;">
                <span style="font-size:14px;color:#666;">键</span>
                <input style="width:70%;border:none;background:none;outline:none;" />
            </div>
            <div class="before-div" style="width:100%;">
                <span style="font-size:14px;color:#666;">值</span>
                <input style="width:70%;border:none;background:none;outline:none;" />
            </div>
        </div>
    </div>
</div>
<!--行列布局-->
<div class="row-div">
    <div class="cell-div cell-1-div">
        <span>请求地址：</span>
    </div>
    <div class="cell-div cell-2-div">
        <input id="url" class="input" placeholder="请输入请求地址" />
    </div>
</div>
<!--行列布局-->
<div class="row-div">
    <div class="cell-div cell-1-div">
        <span>Json参数：</span>
    </div>
    <div class="cell-div cell-2-div">
        <textarea id="json" class="textarea" placeholder="请输入json参数"></textarea>
    </div>
</div>
<!--行列布局-->
<div class="row-div">
    <div class="cell-div">
        <span id="btnInput" style="display:inline-block;background:#099dff;color:#fff;cursor:pointer;width:100%;text-align:center;margin-top:20px;">发起请求</span>
    </div>
</div>

<!--弹窗显示返回结果-->
<div id="infoDiv" style="width:100%;height:100%;position:fixed;top:0px;left:0px;background:rgba(0,0,0,.5);display:none;">
    <div style="width:90%;margin:0 auto;height:74%;margin-top:20px;background:#fff;border-radius:10px;padding:3%;">
        <div style="width:100%;height:40px;text-align:center;border-bottom:1px solid #ccc;line-height:30px;">
            <span>响应结果</span>
            <span id="close" style="float:right;cursor:pointer;">关闭</span>
        </div>
        <div id="contentDiv" style="height:calc(100% - 40px);overflow:auto;">

        </div>
    </div>
</div>

<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">

    $(function () {
        //全局变量
        var page_info = {
            httpType: 'http',
            requestType: 'get',
            requestUrl: '',
            jsonValue: ''
        }

        // 请求协议
        $(".radio-http").click(function () {
            var value = $(this).attr("data-value");
            $(".radio-http").removeClass('radio-action-div');
            $(this).addClass('radio-action-div');
            page_info.httpType = value;
        });

        // 请求类型
        $(".radio-request").click(function () {
            var value = $(this).attr("data-value");
            $(".radio-request").removeClass('radio-action-div');
            $(this).addClass('radio-action-div');
            page_info.httpType = value;
        });

        // 请求地址
        $("#url").keyup(function () {
            var value = $(this).val();
            page_info.requestUrl = value;
        });

        // json参数
        $("#json").keyup(function () {
            var value = $(this).val();
            page_info.jsonValue = value;
        });

        // 发起请求
        $("#btnInput").click(function () {
            console.log(page_info)

            $.ajax({
                url: page_info.httpType + "://" + page_info.requestUrl,
                data: page_info.jsonValue,
                dataType: 'html',
                type: page_info.requestType,
                success: function (result) {

                    $("#infoDiv").show();
                    $('#contentDiv').text(result);
                },
                error: function (result) {

                    $("#infoDiv").show();
                    $('#contentDiv').text(result.responseText == undefined ? result.statusText : result.responseText);
                }
            });
        });

        // 关闭弹窗
        $("#close").click(function () {
            $("#infoDiv").hide();
        });
    });
</script>
文章标签：
JavaScript
前端开发
测试技术
程序员
API
数据格式
JSON
关键词：
API接口
API请求
API功能
jQuery页面
jQuery功能
小5聊基础
目录
相关文章
龙大吉
|
2月前
|
Java API 数据库
构建RESTful API已经成为现代Web开发的标准做法之一。Spring Boot框架因其简洁的配置、快速的启动特性及丰富的功能集而备受开发者青睐。
【10月更文挑战第11天】本文介绍如何使用Spring Boot构建在线图书管理系统的RESTful API。通过创建Spring Boot项目，定义`Book`实体类、`BookRepository`接口和`BookService`服务类，最后实现`BookController`控制器来处理HTTP请求，展示了从基础环境搭建到API测试的完整过程。
龙大吉
58 4
技术交流18179014480
|
21天前
|
JSON 供应链 搜索推荐
某东API接口：开启电商数据交互与功能调用的新篇章
在当今的数字化时代，电商平台的开放API（Application Programming Interface，应用程序编程接口）已经成为连接开发者与电商平台之间的重要桥梁。京东作为中国领先的电商平台之一，其开放平台提供的API接口更是为开发者们带来了无限可能。本文将深入探讨京东API接口的功能、应用场景、使用流程以及其在电商领域的重要价值。
技术交流18179014480
32 1
哈你真皮
|
26天前
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件，可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
哈你真皮
31 5
爱专研的技术土狗
|
1月前
|
API 开发工具 开发者
探究亚马逊国际获得AMAZON商品详情 API 接口功能、作用与实际应用示例
亚马逊提供的Amazon Product Advertising API或Selling Partner API，使开发者能编程访问亚马逊商品数据，包括商品标题、描述、价格等。支持跨境电商和数据分析，提供商品搜索和详情获取等功能。示例代码展示了如何使用Python和boto3库获取特定商品信息。使用时需遵守亚马逊政策并注意可能产生的费用。
爱专研的技术土狗
68 1
刘大猫.
|
1月前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
刘大猫.
35 3
刘大猫.
|
2月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
刘大猫.
40 18
大树营养快线
|
2月前
|
前端开发 JavaScript API
前端Get请求能在body上传参吗
【10月更文挑战第11天】 在浏览器环境中，GET请求的body参数会被忽略，这是因为浏览器中的XHR和fetch实现限制了这一行为。而在Node.js服务端环境中，GET请求可以在body中传递参数，因为服务端请求库没有这样的限制。实际上，GET请求不带body是HTTP标准的一部分，但在某些场景下，为了遵循RESTful规范，可以考虑通过服务端转发或BFF模式来实现复杂的参数传递。
大树营养快线
523 2
何雨晨
|
2月前
|
机器学习/深度学习 算法 Java
通过 Java Vector API 利用 SIMD 的强大功能
通过 Java Vector API 利用 SIMD 的强大功能
何雨晨
60 10
mao29955
|
2月前
|
存储 缓存 监控
除了 SharedWorker，还有哪些技术可以优化前端轮询请求？
【10月更文挑战第6天】
mao29955
54 2
mao29955
|
2月前
|
移动开发 前端开发 HTML5
SharedWorker 优化前端轮询请求
【10月更文挑战第6天】
mao29955
34 1

热门文章

最新文章

  • 1
    GitHub Actions自动化部署前端项目指南
  • 2
    「前端工程化」从0-1搭建react，ts脚手架（1.2w字超详细教程）
  • 3
    合格前端系列第四弹-如何监听一个数组的变化
  • 4
    前端 时间个性化 插件 jquery.timeago.js
  • 5
    前端提交POST请求却变成GET请求的原因及解决方法
  • 6
    wordpress页面前端添加编辑按钮
  • 7
    你用过的网站前端优化的技术有哪些？
  • 8
    基于qiankun落地部署微前端爬”坑“记
  • 9
    前端进阶|第四天从setTimeout、Promise看js 的异步机制
  • 10
    python 学习 第九篇 前端应用
  • 1
    Java Stream API详解与使用
    95
  • 2
    Kubernetes学习-集群搭建篇(三) Node配置完善和API概述
    85
  • 3
    HTML5 Canvas 提供丰富的绘图API，支持绘制图形、文本、渐变和图像，助力游戏开发
    73
  • 4
    Java 8新特性之Lambda表达式与Stream API的深度解析
    103
  • 5
    Linux系统编程之文件编程常用API回顾和文件编程一般步骤
    83
  • 6
    阿里云微服务引擎及 API 网关 2024 年 4 月产品动态
    390
  • 7
    阿里云微服务引擎 MSE 及 API 网关 2024 年 04 月产品动态
    271
  • 8
    智能体-Agent能力升级！新增Assistant API & Tools API服务接口
    555
  • 9
    使用Performance API进行性能监控
    108
  • 10
    RESTful API的最佳实践
    67

    • 相关课程

    更多
  • 网站性能前端监控课程
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Spring Boot2.0实战Redis分布式缓存
  • CUDA MATH API
  • API PLAYBOOK

    • 相关实验场景

    更多
  • 基于Assistant Api的旅游助手
  • 快速体验智能体API应用
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
    • 下一篇
    DataWorks售前咨询