.html文件调用接口示例

最新推荐文章于 2024-07-17 22:42:53 发布
最新推荐文章于 2024-07-17 22:42:53 发布
阅读量1.3w 收藏 12
点赞数 3
文章标签： matlab javascript json ViewUI
原文链接：https://juejin.im/post/5ab091255188255582522f7f
版权

直接在.html文件中请求接口的写法示例

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<title>测试</title>
<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}

	html {
		font-size: calc(100vw / 7.5);
	}

	@media screen and (min-width: 750px) {
		html {
			font-size: calc(750px / 7.5);
		}
	}

	body {
		font-size: .28rem;
		font-family: Helvetica Neue, Tahoma, Arial, PingFangSC-Regular, Hiragino Sans GB, sans-serif;
		width:7.5rem;
		margin:0 auto;
		background-color: #F5F5F8;


	}
	.wrap {
		padding:.4rem 0 .8rem;
		font-family: PingFang-SC-Medium;
		letter-spacing: 0;
		color:#333333;
		padding: .4rem 0 .8rem;
	}
	a {
		display: flex;
		align-items: center;
		width: 100%;
		text-decoration: none;
		font-size: .32rem;
		color: #333333;
		line-height: .36rem;
		background-color: white;
		padding: .24rem .3rem;
		margin-bottom: .06rem;
		box-sizing: border-box;
	}
	.arrow {
		width: .2rem;
		height: .2rem;
		border-top: 1px solid #A5A5A5;
		border-right: 1px solid #A5A5A5;
		margin-right: 0;
		margin-left: auto;
		transform: rotate(45deg);
	}

</style>
</head>
<body>
	<div class="wrap">
	</div>
	<!-- 注意此处所用jq文件路径 -->
<script src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
	
	var userAgent = navigator.userAgent
	if (/vivo x7/i.test(userAgent)) {
		var fontSize = 100 / (parseFloat(getComputedStyle(document.documentElement).fontSize) / (Math.min(innerWidth, screen.width) / 7.5))
		document.documentElement.style.fontSize =  "calc(" + fontSize + "vw / 7.5)"

	}

	function checkCalcSupport() {
		var div = document.createElement("div")
		div.style.cssText = "width: calc(100vw / 7.5)"
		return div.style.cssText.length
	}
	function calculateRootFontSize() {
		var idealViewportWidth = window.innerWidth
		var ua = navigator.userAgent
		if (ua.match(/MI 5/) && ua.match(/QQBrowser/) && ! ua.match(/MicroMessenger/)) {
			idealViewportWidth = (3 * idealViewportWidth) / 2.6 // 小米虽然 dpr 是3 但表现的依然是 2.6
		}
		document.documentElement.style.fontSize = idealViewportWidth / 7.5 + "px";

	}
	if(!checkCalcSupport()) {
		calculateRootFontSize()
	}

	

	$(function () {

        var urlPrefix=""; //接口地址前缀
        $.ajax({
            type: "POST",
            url: `${urlPrefix}/yourInterfacePath`,
            headers: {
                "Content-Type": "application/x-www-form-urlencoded",
            },
            dataType: "json",
            success: function(data){
				data.serviceInformationWeb.map(function (v,i) {
                    $(`<a href="service-guide-item.html?id=${v.id}">
			<span>${v.guideTitle}</span>
			<span class="arrow"></span>
		</a>`).appendTo($(".wrap"))
                })
            }
        });
    })
</script>

</body>

</html>

复制代码

由上述页面带参数跳转到别的页面

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>服务指南</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        html {
            font-size: calc(100vw / 7.5);
        }

        @media screen and (min-width: 750px) {
            html {
                font-size: calc(750px / 7.5);
            }
        }

        body {
            font-size: .28rem;
            font-family: Helvetica Neue, Tahoma, Arial, PingFangSC-Regular, Hiragino Sans GB, sans-serif;
            width:7.5rem;
            margin:0 auto;
            background-color: #F5F5F8;


        }
        .wrap {
            padding:.2rem .4rem .8rem;
            font-family: PingFang-SC-Medium;
            letter-spacing: 0;
            /* line-height: .48rem; */
            color:#333333;
            padding: .6rem .3rem;
        }
        .title {
            font-size: .48rem;
            color: #000;
            line-height: .66rem;
            margin-bottom: .4rem;

        }
        .item {
            padding-bottom: .4rem;
        }

        h3 {
            font-size: .36rem;
            line-height: .5rem;
            /* margin-bottom: .16rem; */
            color: #000;
            font-weight: normal;
        }

        p {
            font-size: .30rem;
            line-height: .42rem;
            color: #333;
            margin-top: .16rem;
        }

        pre {
            white-space: pre-wrap;
            word-wrap: break-word;
            line-height: .42rem;
        }

        .imgBox {
            width: 100%;
        }
        .item img{
            width: 100%;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="item">

    </div>
</div>
</body>
<script src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">

    var userAgent = navigator.userAgent
    if (/vivo x7/i.test(userAgent)) {
        var fontSize = 100 / (parseFloat(getComputedStyle(document.documentElement).fontSize) / (Math.min(innerWidth, screen.width) / 7.5))
        document.documentElement.style.fontSize =  "calc(" + fontSize + "vw / 7.5)"

    }

    function checkCalcSupport() {
        var div = document.createElement("div")
        div.style.cssText = "width: calc(100vw / 7.5)"
        return div.style.cssText.length
    }
    function calculateRootFontSize() {
        var idealViewportWidth = window.innerWidth
        var ua = navigator.userAgent
        if (ua.match(/MI 5/) && ua.match(/QQBrowser/) && ! ua.match(/MicroMessenger/)) {
            //value = (3 * value) / window.devicePixelRatio
            idealViewportWidth = (3 * idealViewportWidth) / 2.6 // 小米虽然 dpr 是3 但表现的依然是 2.6
        }
        document.documentElement.style.fontSize = idealViewportWidth / 7.5 + "px";

    }
    if(!checkCalcSupport()) {
        calculateRootFontSize()
    }

    $(function () {
        var urlPrefix=""; // 接口地址前缀
        var id=window.location.search.split("=")[1];
        $.ajax({
            type: "POST",
            url: `${urlPrefix}/接口地址前缀`,
            data:`id=${id}`,
            headers: {
                "Content-Type": "application/x-www-form-urlencoded",
            },
            dataType: "json",
            success: function(data){
                data.serviceInformationWeb.content=data.serviceInformationWeb.content.replace(/\%26nbsp;/g," ")
                $('.item').html(data.serviceInformationWeb.content)
            }
        });
    })


</script>
</html>


复制代码
weixin_34400525
关注
  • 3
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html请求接口_前端工程师吐后端工程师（第八讲）——接口的开发
weixin_39688170的博客
11-22 954
上一讲我们介绍了如何写让模板变量在页面上展示，本讲我们介绍一下后端开发工作中最常用的功能——接口。创建一个go_test4文件夹，然后把go_test3中的代码复制进去。然后打开main.go文件，进行更改。说到接口就必不可少的涉及到传值和接口返回，还有GET方式 、POST方式获取数据。下面我们就先举例来看看一个GET接口如何接收参数并且返回数据，具体代码如下：package 代码前半部分还是跟...
html请求接口_接口测试平台代码实现77: 多接口用例17
weixin_39991531的博客
12-01 618
首先恭喜下Testerhome大会开幕，并且我们社团在testerhome的百团大战中名列前三。其次是平台的在线体验地址发布：阿里云服务器：http://47.97.77.125:8000/home/用户名：admin密码：123456你也可以自己在登陆页面注册新的。...
在html文档里用ajax调用get接口
m0_63574519的博客
06-02 859
1.引入jquery。
HTML基础标签+HTTP请求
最新发布
one piece的博客
07-17 898
当我们在浏览器中输入网址后，网页会自动生成对应网页且打开曾经登录过的网站，发现无需重新登录的直接进入首页，这是如何做到的呢？其实，当在浏览器输入网址后浏览器会通过网址中域名解析出的IP地址访问该网址对应的服务器；服务器收到浏览器发出的请求后，根据网址中包含的执行方法，路径信息等信息返回相应的文本信息，最终浏览器解析服务器返回的信息从而生成对应的网页。
纯html页面请求接口文档微信分享
11-30
本人新手，有大神帮助写了一个没有在html请求微信jssdk接口做的微信分享，希望有用
php html5 api,HTML5通用接口详解
weixin_39865440的博客
03-19 207
1.先说几个基本类型： DOMString， boolean， long， unsigned long， double，NaN(Not-a-Number)。DOMString其实就是其它大家常用的语言中的string。 在HTML5中，它用于表示url，Dom内容等等。其他的boolean(布尔)， long(长整型)， unsigned long(无符号长整型)， double(浮点数)我想不用...
html调用http接口
nothing
04-08 1250
html调用http接口
html调用接口_接口自动化测试 - 入门
weixin_39782832的博客
11-29 411
1. 什么是接口测试顾名思义，接口测试是对系统或组件之间的接口进行测试，主要是校验数据的交换，传递和控制管理过程，以及相互逻辑依赖关系。其中接口协议分为HTTP,WebService,Dubbo,Thrift,Socket等类型，测试类型又主要分为功能测试，性能测试，稳定性测试，安全性测试等。在分层测试的“金字塔”模型中，接口测试属于第二层服务集成测试范畴。相比UI层（主要是WEB或APP）自动化...
微信端html5页面调用分享接口示例
01-21
本文章主要是记录调用微信分享接口需要注意的事项； 1、前端用的angular1框架，首先需要在index页面引入微信接口文件； [removed][removed] 2、在myApp.run文件中写微信分享函数，注意该函数需要将当前页面的url...
HTML商城接口调用小例子.zip
08-19
HTML商城接口调用小例子.zip这个压缩包文件包含了一个关于商城接口调用的示例，主要涉及HTML与后端API接口交互的相关知识点。接口描述提到的`modifyapi`是一个用于修改API接口的功能，允许开发者对已有的API进行编辑...
node.js调用C++函数的方法示例
01-01
ffi是nodejs直接调用so库的一种实现，可以调用纯c的接口。 要想node.js调用C++的函数等，须先将C++代码编译成二进制的.node文件。node.js官方文档https://nodejs.org/dist/latest-v8.x/docs/api/addons.html中的C++ ...
WinForm调用百度地图接口用法示例
08-30
在这个示例中，我们将探索如何在一个基于WinForm的项目中嵌入WebBrowser控件，并通过该控件加载HTML文件来调用百度地图API接口。 首先，关于百度地图API的使用，这需要开发者先注册百度地图开放平台账号，并获取一...
HTML5 api 调用示例
12-20
HTML5 API调用示例是现代网页开发中的关键部分，它极大地扩展了Web应用程序的功能，使其可以实现更多原生应用的特性。W3C（万维网联盟）是定义HTML5标准的权威组织，它的API规范为开发者提供了丰富的工具集，以创建...
html请求接口_自动生成接口文档
weixin_39974409的博客
12-01 798
一、开头开发的小伙伴应该会遇到这个问题吧！项目设计阶段写的接口文档，需求的不断的改动，导致前期定义的接口已面目全非。如果没有及时更新接口文档，那么这些接口文档对前端开发人员将是一场灾难！由于项目紧急，是没有时间完善接口文档，我们该如何提高前后端的开发效率呢？解决方案一：项目集成 Swagger 插件，前端人员访问 Swagger 生成的接口文档，查看和使用接口。解决方案二：项目集成 Swagger...
HTML5——接口
Galaksen的博客
10-17 3770
目录 1.网络监听接口 2.全屏接口的使用 3.FileReader的使用 4.拖拽接口 5.地理定位接口 6.Web存储 6.1 sessionStorage 6.2 localStorage 7.应用缓存 8.多媒体接口（自定义播放器案例） 1.网络监听接口 2.全屏接口的使用 全屏操作的主要方法和属性 ： requestFullScreen()：开启全屏显示...
html请求接口_通用网关接口-FastCGI介绍
weixin_39754267的博客
11-28 280
一、概述FastCGI 实际上是增加了一些扩展功能的 CGI 、是 CGI 的改进，描述了客户端和Web服务器程序之间传输数据的一种标准。FastCGI 致力于减少Web服务器与CGI程序之间进行互动的开销，从而使Web服务器可以同时处理更多的Web请求。与 CGI 为每个Web请求创建一个新的进程不同， FastCGI 使用持续的进程来处理一连串的Web请求，这些进程由FastCGI进程管理器管...
html请求接口_接口测试Mock利器moco runner
weixin_39732316的博客
11-29 173
谢谢打开这篇文章的每个你关注我们 点击右上角···设为星标mock测试：mock测试就是在测试过程中，对于某些不容易构造或者不容易获取的对象，用一个虚拟的对象来创建以便测试的测试方法。这样框架很多，有的是通过编码实现，有的可以直接编辑文件直接提供，本文介绍的moco-runner两种方式都可以。下载地址http://repo1.maven.org/maven2/com/github/...
html语言中的接口,HTML5通用接口详解
weixin_39759600的博客
06-02 896
1.先说几个基本类型： DOMString， boolean， long， unsigned long， double，NaN(Not-a-Number)。DOMString其实就是其它大家常用的语言中的string。 在HTML5中，它用于表示url，Dom内容等等。其他的boolean(布尔)， long(长整型)， unsigned long(无符号长整型)， double(浮点数)我想不用...
html语言中的接口,html中调用接口-Go语言中文社区
weixin_39907157的博客
06-02 1660
1.加载页面时直接调用方法函数，在函数中执行调用接口(不带参数)function f() {layui.use('element', function(){var $ = layui.$;$.get("/interface/call", function (result) {console.log("=======>", result)});});}f()2.加载页面时直接调用方法函数，在函...
HTML5如何调用dd.biz.conference.videoConfCall接口
08-29
如果要在HTML5中调用dd.biz.conference.videoConfCall接口，需要在页面中引入钉钉JS-API的文件，然后通过JavaScript代码调用接口。 具体步骤如下： 1. 在页面头部引入钉钉JS-API文件，例如： ```html <script src="https://g.alicdn.com/ilw/ding/0.9.9/scripts/dingtalk.js"></script> ``` 2. 初始化钉钉 JS-API，在页面加载完成之后执行，例如： ```javascript dd.ready(function(){ // 此处调用接口 }); ``` 3. 调用dd.biz.conference.videoConfCall接口， 例如： ```javascript dd.biz.conference.videoConfCall({ id: "xxxxxx", //会议室ID onFail: function() { console.log('fail'); }, onSuccess: function() { console.log('success'); } }); ``` 如果需要更多的使用信息，可以参考官方文档：https://ding-doc.dingtalk.com/doc#/dev/jssdk-overview/video-call
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值