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聊基础
目录
相关文章
代码掌控者
|
1月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素，但是它们之间有些细微的差别，稍不注意，就很容易弄错！
代码掌控者
43 1
蚝油菜花
|
9天前
|
人工智能 自然语言处理 API
Multimodal Live API：谷歌推出新的 AI 接口，支持多模态交互和低延迟实时互动
谷歌推出的Multimodal Live API是一个支持多模态交互、低延迟实时互动的AI接口，能够处理文本、音频和视频输入，提供自然流畅的对话体验，适用于多种应用场景。
蚝油菜花
57 3
Multimodal Live API：谷歌推出新的 AI 接口，支持多模态交互和低延迟实时互动
程序员海军
|
5天前
|
前端开发 API 数据库
Next 编写接口api
Next 编写接口api
程序员海军
25 3
winx_19970108018
|
11天前
|
XML JSON 缓存
阿里巴巴商品详情数据接口（alibaba.item_get) 丨阿里巴巴 API 实时接口指南
阿里巴巴商品详情数据接口（alibaba.item_get）允许商家通过API获取商品的详细信息，包括标题、描述、价格、销量、评价等。主要参数为商品ID（num_iid），支持多种返回数据格式，如json、xml等，便于开发者根据需求选择。使用前需注册并获得App Key与App Secret，注意遵守使用规范。
winx_19970108018
35 6
winx_19970108018
|
10天前
|
JSON API 开发者
淘宝买家秀数据接口（taobao.item_review_show）丨淘宝 API 实时接口指南
淘宝买家秀数据接口（taobao.item_review_show）可获取买家上传的图片、视频、评论等“买家秀”内容，为潜在买家提供真实参考，帮助商家优化产品和营销策略。使用前需注册开发者账号，构建请求URL并发送GET请求，解析响应数据。调用时需遵守平台规定，保护用户隐私，确保内容真实性。
winx_19970108018
38 4
winx_19970108018
|
10天前
|
搜索推荐 数据挖掘 API
淘宝天猫商品评论数据接口丨淘宝 API 实时接口指南
淘宝天猫商品评论数据接口（Taobao.item_review）提供全面的评论信息，包括文字、图片、视频评论、评分、追评等，支持实时更新和高效筛选。用户可基于此接口进行数据分析，支持情感分析、用户画像构建等，同时确保数据使用的合规性和安全性。使用步骤包括注册开发者账号、创建应用获取 API 密钥、发送 API 请求并解析返回数据。适用于电商商家、市场分析人员和消费者。
winx_19970108018
22 3
winx_19970108018
|
20天前
|
JSON API 开发工具
淘宝实时 API 接口丨淘宝商品详情接口（Taobao.item_get）
淘宝商品详情接口（Taobao.item_get）允许开发者获取商品的详细信息，包括基本信息、描述、卖家资料、图片、属性及销售情况等。开发者需注册账号、创建应用并获取API密钥，通过构建请求获取JSON格式数据，注意遵守平台规则，合理使用接口，确保数据准确性和时效性。
winx_19970108018
94 8
jianz123
|
21天前
|
JSON 安全 API
Python调用API接口的方法
Python调用API接口的方法
jianz123
92 5
技术交流18179014480
|
21天前
|
JSON 供应链 搜索推荐
某东API接口：开启电商数据交互与功能调用的新篇章
在当今的数字化时代，电商平台的开放API（Application Programming Interface，应用程序编程接口）已经成为连接开发者与电商平台之间的重要桥梁。京东作为中国领先的电商平台之一，其开放平台提供的API接口更是为开发者们带来了无限可能。本文将深入探讨京东API接口的功能、应用场景、使用流程以及其在电商领域的重要价值。
技术交流18179014480
32 1
winx_19970108018
|
21天前
|
JSON 缓存 监控
淘宝商品详情接口（Taobao.item_get）丨淘宝API接口指南
淘宝商品详情接口（Taobao.item_get）允许开发者通过HTTP GET方法获取淘宝商品的详细信息，包括商品ID、价格、库存等。请求需包含key、secret、num_iid等必选参数，支持缓存及多种返回格式。此接口广泛应用于电商数据分析、商品选品、价格监控等领域，提升商家运营效率。
winx_19970108018
62 1

热门文章

最新文章

  • 1
    jQuery从html代码中获取对应标签的写法
  • 2
    jquery.cookie中的操作
  • 3
    jquery tmpl
  • 4
    JQuery利用sort对DOM元素进行排序
  • 5
    jquery的load加载js页面到指定div中
  • 6
    jQuery on()，live()，trigger()
  • 7
    MVC3.0 采用Jquery实现局部刷新
  • 8
    jQuery清空文本框的值
  • 9
    JQuery操作一个表格简单示例
  • 10
    jQuery一点一滴系列教程(第一点)
  • 1
    Java Stream API详解与使用
    95
  • 2
    Kubernetes学习-集群搭建篇(三) Node配置完善和API概述
    85
  • 3
    HTML5 Canvas 提供丰富的绘图API，支持绘制图形、文本、渐变和图像，助力游戏开发
    75
  • 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基础
  • jQuery开发教程
  • 前端开发框架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售前咨询