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

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

2023-01-15 387
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 对于测试人员来说，借助一些测试工具非常的重要，像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功能
前端jquery
小5聊基础
目录
相关文章
龙大吉
|
8天前
|
前端开发 API UED
Python后端与前端交互新纪元：AJAX、Fetch API联手，打造极致用户体验！
Python后端与前端交互新纪元：AJAX、Fetch API联手，打造极致用户体验！
龙大吉
37 2
六卿
|
11天前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容，支持文本类型文件。在文件读取成功后，可以通过onload事件处理函数获取文件内容，然后展示到页面上。
六卿
15 2
前端JS读取文件内容并展示到页面上
杀死一只知更鸟debug
|
7天前
|
JSON JavaScript 前端开发
Jquery常用操作汇总，dom操作，ajax请求
本文汇总了jQuery的一些常用操作，包括DOM元素的选择、添加、移除，表单操作，以及如何使用jQuery发送Ajax请求，涵盖了GET、POST请求和文件上传等常见场景。
杀死一只知更鸟debug
14 2
周一同学Zelina
|
8天前
|
XML 缓存 JavaScript
提升对前端的认知，不得不了解Web API的DOM和BOM
该文章强调了在前端开发中理解和掌握DOM（文档对象模型）和BOM（浏览器对象模型）的重要性，并介绍了它们的相关操作和应用。
周一同学Zelina
12 0
提升对前端的认知，不得不了解Web API的DOM和BOM
萝卜丝丸子
|
2月前
|
JSON 前端开发 API
构建前端防腐策略问题之更新getMemoryUsagePercent函数以适应新的API返回格式的问题如何解决
构建前端防腐策略问题之更新getMemoryUsagePercent函数以适应新的API返回格式的问题如何解决
萝卜丝丸子
44 4
构建前端防腐策略问题之更新getMemoryUsagePercent函数以适应新的API返回格式的问题如何解决
瓴羊Dataphin
|
1月前
|
API
Dataphin功能Tips系列（20）-外部应用如何通过API的形式查询Dataphin中的离线标签
外部应用如何通过API的形式查询Dataphin中的离线标签
瓴羊Dataphin
23 4
游客jehkoojbs4el6
|
9天前
|
JSON 搜索推荐 API
深入了解亚马逊商品详情API：功能、作用与实例
亚马逊商品详情API接口由官方提供，允许开发者通过程序调用获取商品详细信息，如标题、价格等，适用于电商数据分析、搜索及个性化推荐等场景。接口名称包括ItemLookup、GetMatchingProductForId等，支持HTTP POST/GET请求，需提供商品ID、API密钥及其他可选参数。返回数据格式通常为JSON或XML，涵盖商品详情、分类、品牌、价格、图片URL及用户评价等。该接口对数据收集、实时推荐、营销活动及数据分析至关重要，有助于提升电商平台的数据处理能力、用户体验及商家运营效率。使用时需注册亚马逊开发者账号并申请API访问权限，获取API密钥后按文档构建请求并处理响应数据。
游客jehkoojbs4el6
30 0
六卿
|
9天前
|
前端开发 JavaScript
前端基础(一)_前端页面构成
本文介绍了前端页面的基本构成，包括HTML（负责页面的结构和语义）、CSS（负责页面的样式和表现）和JavaScript（负责页面的行为和动态效果）。文章通过示例代码展示了如何使用这三种技术来创建一个简单的网页，并解释了HTML文档的结构和语法。
六卿
18 0
路边两盏灯
|
2月前
|
JavaScript 网络协议 API
【Azure API 管理】Azure APIM服务集成在内部虚拟网络后，在内部环境中打开APIM门户使用APIs中的TEST功能失败
【Azure API 管理】Azure APIM服务集成在内部虚拟网络后，在内部环境中打开APIM门户使用APIs中的TEST功能失败
路边两盏灯
46 3
格格的阿里云
|
2月前
|
监控 Cloud Native 容灾
核心系统转型问题之API网关在云原生分布式核心系统中的功能如何解决
核心系统转型问题之API网关在云原生分布式核心系统中的功能如何解决
格格的阿里云
40 4

热门文章

最新文章

  • 1
    jQuery时间轴鼠标悬停动画
  • 2
    jQuery实现可编辑的表格
  • 3
    第77天：jQuery事件绑定触发
  • 4
    jQuery 遍历 - parent() 方法
  • 5
    JQuery中$.ajax()方法参数详解（转载）
  • 6
    最佳jQuery教程
  • 7
    抛弃WebService，在.NE“.NET研究”T4中用 jQuery 调用 WCF
  • 8
    功能强大的jQuery图片查看器插件
  • 9
    Hybrid App开发之jQuery选择器
  • 10
    jQuery动画二级下拉菜单
  • 1
    前端和后端限制文件大小的具体实现方式
    374
  • 2
    【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的？
    74
  • 3
    【Web 前端】jQuery 里的 each() 是什么函数？你是如何使用它的？
    148
  • 4
    【Web 前端】如何找到所有 HTML select 标签的选中项？
    93
  • 5
    【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同？
    66
  • 6
    【Web 前端】$(document).ready() 是个什么函数？为什么要用它？
    502
  • 7
    【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片？
    179
  • 8
    从前端Vue到后端Spring Boot：接收JSON数据的正确姿势
    213
  • 9
    【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同？
    91
  • 10
    【Web 前端】网页上有 5 个div元素，如何使用JQ来选择它们？
    102

    • 相关课程

    更多
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • jQuery开发教程
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 前端开发基础1：前端开发环境的安装和配置
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础3：CSS3常见显示属性
  • 快速体验智能体API应用
    • 下一篇
    无影云桌面