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

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

2023-01-15 394
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 对于测试人员来说，借助一些测试工具非常的重要，像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聊基础
目录
相关文章
龙大吉
|
1月前
|
Java API 数据库
构建RESTful API已经成为现代Web开发的标准做法之一。Spring Boot框架因其简洁的配置、快速的启动特性及丰富的功能集而备受开发者青睐。
【10月更文挑战第11天】本文介绍如何使用Spring Boot构建在线图书管理系统的RESTful API。通过创建Spring Boot项目，定义`Book`实体类、`BookRepository`接口和`BookService`服务类，最后实现`BookController`控制器来处理HTTP请求，展示了从基础环境搭建到API测试的完整过程。
龙大吉
42 4
龙大吉
|
2月前
|
前端开发 API UED
Python后端与前端交互新纪元：AJAX、Fetch API联手，打造极致用户体验！
Python后端与前端交互新纪元：AJAX、Fetch API联手，打造极致用户体验！
龙大吉
86 2
刘大猫.
|
28天前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
刘大猫.
36 18
大树营养快线
|
30天前
|
前端开发 JavaScript API
前端Get请求能在body上传参吗
【10月更文挑战第11天】 在浏览器环境中，GET请求的body参数会被忽略，这是因为浏览器中的XHR和fetch实现限制了这一行为。而在Node.js服务端环境中，GET请求可以在body中传递参数，因为服务端请求库没有这样的限制。实际上，GET请求不带body是HTTP标准的一部分，但在某些场景下，为了遵循RESTful规范，可以考虑通过服务端转发或BFF模式来实现复杂的参数传递。
大树营养快线
287 2
何雨晨
|
1月前
|
机器学习/深度学习 算法 Java
通过 Java Vector API 利用 SIMD 的强大功能
通过 Java Vector API 利用 SIMD 的强大功能
何雨晨
40 10
mao29955
|
1月前
|
存储 缓存 监控
除了 SharedWorker，还有哪些技术可以优化前端轮询请求？
【10月更文挑战第6天】
mao29955
38 2
mao29955
|
1月前
|
移动开发 前端开发 HTML5
SharedWorker 优化前端轮询请求
【10月更文挑战第6天】
mao29955
22 1
dufadayang
|
1月前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
dufadayang
81 1
邹荣乐
|
30天前
|
移动开发 前端开发 JavaScript
前端开发实战：利用Web Speech API之speechSynthesis实现文字转语音功能
前端开发实战：利用Web Speech API之speechSynthesis实现文字转语音功能
邹荣乐
147 0
杀死一只知更鸟debug
|
2月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总，dom操作，ajax请求
本文汇总了jQuery的一些常用操作，包括DOM元素的选择、添加、移除，表单操作，以及如何使用jQuery发送Ajax请求，涵盖了GET、POST请求和文件上传等常见场景。
杀死一只知更鸟debug
24 2

热门文章

最新文章

  • 1
    ASP.NET MVC和jQuery系列一：入门篇
  • 2
    MVC中 数据底层联合JQUERY实现动态的安全的验证机制
  • 3
    jquery还原含有rowspan、colspan的table
  • 4
    jQuery .unique()的使用
  • 5
    一起谈.NET技术，抛弃WebService，在.NET4中用 jQuery 调用 WCF
  • 6
    js/Jquery 对像不存在或为空的原因
  • 7
    jquery.cookie中的操作
  • 8
    从零开始学习jQuery (三) 管理jQuery包装集
  • 9
    Jquery 超炫的导航效果
  • 10
    jquery datepicker
  • 1
    前端后端测试接口mork神器，Apifox使用一分钟入门
    209
  • 2
    编译第三方前端项目时候出现Syntax Error: TypeError: Cannot set properties of undefined (setting ‘parent‘)
    467
  • 3
    【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
    54
  • 4
    基于jeecg前端实现从表ERP格式选择
    34
  • 5
    前端进度条组件NProgress
    81
  • 6
    前端效果 登入界面
    49
  • 7
    vue前端展示【1】
    31
  • 8
    nvm,npm,yarn相关指令，前端配置准备
    54
  • 9
    深入浅出JVM（六）之前端编译过程与语法糖原理
    49
  • 10
    HTML5基础题及答案——必刷前端题目(背)
    57

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

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