位置: IT常识 - 正文

前端js调用后端API获取数据的三种方法(2022.7.25)(前端调用后端代码)

编辑:rootadmin
前端js调用后端API获取数据的三种方法(2022.7.25) 前端js调用后台API获取数据的三种方法(2022.7.25)前言需求分析一个Get实例浏览器请求SoapUI软件请求一个Post实例浏览器请求SoapUI软件请求1、Http简介(Browser / Server)1.1 六个主流的浏览器1.2 HTTP请求(Get & Post)2、JavaScript简介3、前端js调用后端API的三种方法3.1 XMLHttpRequest(无需引入外部库)3.1.1 get实例(XHR)3.1.1.1 xhr-get.html3.1.1.2 xhr-get.html运行结果3.1.2 post实例( XHR)3.1.2.1 xhr-post.html3.1.2.2 xhr-post.html 运行结果3.2 jQuery或Ajax(引入jQuery库)3.2.1 jQuery简介3.2.1.1 get实例(jQuery)3.2.1.1.1 jQuery-get.html3.2.1.1.2 jQuery-get.html 运行结果3.2.1.2 post实例(jQuery)3.2.1.2.1 jQuery-post.html3.2.1.2.2 jQuery-post.html 运行结果3.2.2 Ajax简介及使用3.2.2.1 get实例(ajax)3.2.2.1.1 ajax-get.html3.2.2.1.2 ajax-get.html 运行结果3.2.2.2 post实例(ajax)3.2.2.2.1 ajax-post.html3.2.2.2.2 ajax-post.html 运行结果3.3 axios(引入axios库)3.3.1 get实例(axios)3.3.1.1 axios-get.html3.3.1.2 axios-get.html 运行结果3.3.2 post实例(axios)3.3.2.1 axios-post.html3.3.2.2 axios-post.html 运行结果4、总结前言

推荐整理分享前端js调用后端API获取数据的三种方法(2022.7.25)(前端调用后端代码),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js调用后端接口,前端引入js,前端怎么调用后端接口 vue 初学者,前端调用函数,前端调用后端接口示例,js调用后端接口,前端调用后端代码,前端调用后端代码,内容如对您有帮助,希望把文章链接给更多的朋友!

        随着云计算、分布式微服务技术的发展,现有网络项目大都基于前后端分离的技术手段实施,一方面是便于缓解后台服务器的压力,充分利用各台服务节点的计算和存储资源,尽可能地提高服务器性能;另一方面可提高服务的可靠性、容灾能力,以便在某服务、节点上服务器甚至节点崩溃的情况下得以对该服务快速有效地进行替换或恢复,表现为极强的修复能力(注:先进制造技术的发展和充足的材料供应能力使得时间、价格方面的维修成本不断高于替换成本,让废旧品及时得到回收利用再生产,从而减少繁琐的维修过程,以便缩短维修时间,即能换不修原则)。         在Web项目实施的过程中,后端工程师负责发布Web服务,提供完善的调用接口;而前端开发人员则以后台服务接口的说明文档为基础,按需调用后台API来实现数据的接收,最后利用可视化技术对数据进行炫酷展示,进而提供强大的平台功能。

需求分析

        在Web前端开发的过程中,javascript 工程师和开发人员往往需要调用后台API来获取所需数据(data),之后通过向菜单、列表、表格、文本框、按钮、下拉框等div内部控件中填充显示,从而实现网页系统的展示、查询和动态更新等目标。当然,前端开发者和后台工程师皆可通过Postman、SoapUI等软件来测试接口是否正常和能否返回数据,或者自己编写Java代码来发送http请求,最常用的非DevTools莫属。

        下图是网上的一个后台API实例,它利用Swagger在线文档说明了多个后台接口的调用方法,较为详细,实测有效,通过此实例来证明本文所述三种方法的可行性和有效性。

网上的一个后台API在线文档

一个Get实例

        http://112.125.90.247:81/api/Log4Net/GetAsync?page=1&intPageSize=20,此Get类型的url是一个典型的单页查询接口,用于获取HTML文档中分页表格中第1页中的20条数据记录,通过修改page和intPageSize的大小然后发送Get类型的Http请求主动获取响应数据得以动态更新前端页面表格。

浏览器请求

SoapUI软件请求

一个Post实例url: "http://112.125.90.247:81/api/Data/Post",data: { "Id": "string", "Name": "string", "X": 123, "Y": 456, "Num": 0, "Note": "string", "Attachment": "string", "CreateTime": "2022-07-19T15:33:28.504Z", "UpdateTime": "2022-07-19T15:33:28.504Z"},

        此Post实例对应的url为http://112.125.90.247:81/api/Data/Post,需要向其发送的数据字段共有9个,分别是Id、Name、X、Y、Num、Note、Attachment、CreateTime、UpdateTime,Post类型的请求需要将其嵌入到XML请求进行发送,之后获取XML响应并解析结果得到所需的返回数据。

浏览器请求

        如果将上述请求封装为Get类型的请求,则对应url为http://112.125.90.247:81/api/Data/Post?Id=String&Name=string&X=123&Y=456&Num=0&Note=string&Attachment=string&CreateTime=2022-07-19T15:33:28.504Z&UpdateTime=2022-07-19T15:33:28.504Z,将其在浏览器地址栏中打开,提示如下信息:请求的资源不支持http方法"GET",这就说明此Post类型的后台API接口在开发时明确了不支持Get方式访问,但有的Post接口是支持Get方法访问的,因为在后端可进行配置。

SoapUI软件请求

1、Http简介(Browser / Server)

        HTTP一般指HTTP 协议(超文本传输协议,即HyperText Transfer Protocol的缩写),是因特网上应用最为广泛的一种网络传输协议。作为一种用于分布式、协作式和超媒体信息系统的应用层协议,HTTP 是为 Web 浏览器与 Web 服务器之间的通信而设计的,它基于 TCP/IP 通信协议来传递HTML*文件、图片、文本、视频、、音频、查询结果等数据。

1.1 六个主流的浏览器

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari 前端js调用后端API获取数据的三种方法(2022.7.25)(前端调用后端代码)

各大浏览器

        B/S类型的Web项目需要依靠网页浏览器来展示前端网页平台效果,而各个浏览器因版本和内核的不同所对应的的兼容性和支持能力也不尽相同,而从用户体验而言,目前业界内使用次数较多和受到一致好评的浏览器当属——Google公司推出的Chrome网页浏览器。

1.2 HTTP请求(Get & Post)

        HTTP请求是指从Client端到Server端的请求消息,通常是对资源进行请求,需要设定资源的请求方法Method、资源的标识符Identifier及使用的协议Protocol及版本Version,然后向Web服务器发送数据块(即请求信息)。HTTP请求包含多种方法,最常用的为Get方式和Post方式,下表对这两种方式进行了简单对比。

GetPost参数在URL中参数放在请求体中发送数据量小发送数据量大安全性低,会被缓存安全性高,不会缓存

Http请求中Get方式和Post方式的对比

2、JavaScript简介

        JavaScript作为动态客户端脚本语言,可提供网页内容的动态更新、地图交互、二三维图形动画展示、视频播放及点唱机滚动等效果,简而言之,HTML和CSS仅能够提供静态页面,就是对静态的网页信息实现动态化。

JavaScript官网

Github上的JavaScript 3、前端js调用后端API的三种方法下面主要介绍三种方法来实现前端js对后端API接口的调用:

方法一:XMLHttpRequest方法二:jQuery和Ajax方法三:axios3.1 XMLHttpRequest(无需引入外部库)

        随着XMlHttpRequest对象的广泛采用,开发者可以快速构建如 Google Maps 和 Gmail 这样的 Web 应用程序,这些应用程序使用 XMLHttpRequest 来获取新的地图图块或新的电子邮件,而无需重新加载整个页面。使用XMLHttpRequest的步骤为:(1)创建XMLHttpRequest对象;(2)建立http连接;(3)发送请求;(4)获取返回数据。         Post请求与Get请求主要有两点不同: ①post请求需要设置请求头的格式内容:xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); ②post请求参数放在send里面,即请求体。具体详情可参考mozilla-xmlhttprequest和Github上对xmlhttprequest的有关介绍。

3.1.1 get实例(XHR)3.1.1.1 xhr-get.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>HTML页面测试XHR请求 By jing_zhong</title> <script> //获取系统当前时间的函数 function gettime(){ var a = new Date(); var b = a.toLocaleTimeString(); var c = a.toLocaleDateString(); document.getElementById("currenttime").innerHTML = c+"&nbsp"+b +" By jing_zhong"; } setInterval(function() {gettime()},1000); var responsecontent; //发送HTTP请求的函数 function SendXMLHttpRequest() { var pageid = document.getElementById("pageid").value; var pagesize = document.getElementById("pagesize").value; if(!isNaN(Number(pageid)) && !isNaN(Number(pagesize))){ var xmlhttp,url="http://112.125.90.247:81/api/Log4Net/GetAsync?page="+pageid+"&intPageSize="+pagesize; if (window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest();// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 } else{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");// IE6, IE5 浏览器执行代码 } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ responsecontent = xmlhttp.responseText; var Res = "成功获取HTTP响应,得到第"+pageid+"页共"+pagesize+"个结果!\n"+responsecontent; document.getElementById("result").innerText = Res; document.getElementById("convertjson").disabled = false; document.getElementById("jsonresult").innerText = ""; } } xmlhttp.open("GET",url,true); xmlhttp.send(); }else{ window.alert("请输入整数!"); document.getElementById("result").innerText = ""; document.getElementById("convertjson").disabled = true; responsecontent = ""; } } //对json数据进行高亮的函数 function syntaxHighlight(json) { if (typeof json != 'string') { json = JSON.stringify(json, undefined, 2); } json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) { var cls = 'number'; if (/^"/.test(match)) { if (/:$/.test(match)) { cls = 'key'; } else { cls = 'string'; } } else if (/true|false/.test(match)) { cls = 'boolean'; } else if (/null/.test(match)) { cls = 'null'; } return '<span class="' + cls + '">' + match + '</span>'; }); } //将请求结果转为json格式的函数 function ToJSON() { console.log(responsecontent); var Res = JSON.parse(responsecontent, null, 3); document.getElementById("jsonresult").innerHTML = syntaxHighlight(Res); } </script> <style> pre { background-color:rgb(238, 231, 231); outline: 1px solid #ccc; padding: 5px; margin: 5px; } .string { color: rgb(22, 10, 126); } .number { color: rgb(13, 214, 124); } .boolean { color: rgb(225, 97, 195); } .null { color: rgb(172, 167, 14); } .key { color: #cf4914; } #myDiv { background-image: url("https://img2.baidu.com/it/u=1721953618,4133119400&fm=253&fmt=auto&app=138&f=JPEG");} </style> </head> <body> <div id="myDiv"> <label id="currenttime" style="color: #AC2925; "></label> <form style="color:#2572adfa;border:2px"> <label>请输入页数(如5)</label><input type="text" value="5" id="pageid"/><br> <label>请输入页面大小(15)</label><input type="text" value="15" id="pagesize"/> </form> <button type="button" onclick="SendXMLHttpRequest()">1、利用XMLHttpRequest发送请求</button> <p id="result" style="color:#b0a117fa"></p> <button type="button" disabled="false" onclick="ToJSON()" id="convertjson">2、将请求结果转为json格式</button> <pre id="jsonresult" class="pre"></pre> </div> </body></html>3.1.1.2 xhr-get.html运行结果

3.1.2 post实例( XHR)3.1.2.1 xhr-post.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>HTML页面测试XHR请求 By jing_zhong</title> <script> //获取系统当前时间的函数 function gettime(){ var a = new Date(); var b = a.toLocaleTimeString(); var c = a.toLocaleDateString(); document.getElementById("currenttime").innerHTML = c+"&nbsp"+b +" By jing_zhong"; } setInterval(function() {gettime()},1000); var responsecontent; //发送HTTP请求的函数 function SendXMLHttpRequest() { var xmlhttp,url="http://112.125.90.247:81/api/Data/Post"; if (window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest();// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 } else{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");// IE6, IE5 浏览器执行代码 } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ responsecontent = xmlhttp.responseText; var Res = "成功获取HTTP响应,得到结果!\n"+responsecontent; document.getElementById("result").innerText = Res; document.getElementById("convertjson").disabled = false; document.getElementById("jsonresult").innerText = ""; } } xmlhttp.open("POST",url,true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");// Post请求需要设置请求头 xmlhttp.send("Id="+"string"+"&Name="+"string"+"&X="+"123"+"&Y="+"456"+"&Num="+"0"+"&Note="+"string"+"&Attachment="+"string"+"&CreateTime="+"2022-07-19T15:33:28.504Z"+"&UpdateTime="+"2022-07-19T15:33:28.504Z"); } //对json数据进行高亮的函数 function syntaxHighlight(json) { if (typeof json != 'string') { json = JSON.stringify(json, undefined, 2); } json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) { var cls = 'number'; if (/^"/.test(match)) { if (/:$/.test(match)) { cls = 'key'; } else { cls = 'string'; } } else if (/true|false/.test(match)) { cls = 'boolean'; } else if (/null/.test(match)) { cls = 'null'; } return '<span class="' + cls + '">' + match + '</span>'; }); } //将请求结果转为json格式的函数 function ToJSON() { console.log(responsecontent); var Res = JSON.parse(responsecontent, null, 3); document.getElementById("jsonresult").innerHTML = syntaxHighlight(Res); } </script> <style> pre { background-color:rgb(238, 231, 231); outline: 1px solid #ccc; padding: 5px; margin: 5px; } .string { color: rgb(22, 10, 126); } .number { color: rgb(13, 214, 124); } .boolean { color: rgb(225, 97, 195); } .null { color: rgb(172, 167, 14); } .key { color: #cf4914; } #myDiv { background-image: url("https://img2.baidu.com/it/u=1721953618,4133119400&fm=253&fmt=auto&app=138&f=JPEG");} </style> </head> <body> <div id="myDiv"> <label id="currenttime" style="color: #AC2925; "></label> <button type="button" onclick="SendXMLHttpRequest()">1、利用XMLHttpRequest发送请求</button> <p id="result" style="color:#b0a117fa"></p> <button type="button" disabled="false" onclick="ToJSON()" id="convertjson">2、将请求结果转为json格式</button> <pre id="jsonresult" class="pre"></pre> </div> </body></html>3.1.2.2 xhr-post.html 运行结果

3.2 jQuery或Ajax(引入jQuery库)3.2.1 jQuery简介

        作为一个 JavaScript 库,jQuery使得JavaScript编程十分简单,拥有write less, do more的响亮口号,十分注重实际行动和用户体验。关于jQuery的使用,一方面,可以下载jQuery文件在html文件中进行本地引用,或者直接引用带url链接的在线jQuery.js文件;另一方面,可以使用Node包管理工具npm进行命令行安装npm install jquery。

3.2.1.1 get实例(jQuery)3.2.1.1.1 jQuery-get.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>HTML页面测试XHR请求 By jing_zhong</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> //获取系统当前时间的函数 function gettime(){ var a = new Date(); var b = a.toLocaleTimeString(); var c = a.toLocaleDateString(); document.getElementById("currenttime").innerHTML = c+"&nbsp"+b +" By jing_zhong"; } setInterval(function() {gettime()},1000); var responsecontent; //发送HTTP请求的函数 function SendXMLHttpRequest() { var pageid = document.getElementById("pageid").value; var pagesize = document.getElementById("pagesize").value; if(!isNaN(Number(pageid)) && !isNaN(Number(pagesize))){ var url="http://112.125.90.247:81/api/Log4Net/GetAsync?page="+pageid+"&intPageSize="+pagesize; $.get(url).done(function (res) { console.log(res); responsecontent = JSON.stringify(res.response.data); var Res = "成功获取HTTP响应,得到第"+pageid+"页共"+pagesize+"个结果!\n"+responsecontent; document.getElementById("result").innerText = Res; document.getElementById("convertjson").disabled = false; document.getElementById("jsonresult").innerText = ""; }).fail(function (e) { console.log('error'); }) }else{ window.alert("请输入整数!"); document.getElementById("result").innerText = ""; document.getElementById("convertjson").disabled = true; responsecontent = ""; } } //对json数据进行高亮的函数 function syntaxHighlight(json) { if (typeof json != 'string') { json = JSON.stringify(json, undefined, 2); } json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) { var cls = 'number'; if (/^"/.test(match)) { if (/:$/.test(match)) { cls = 'key'; } else { cls = 'string'; } } else if (/true|false/.test(match)) { cls = 'boolean'; } else if (/null/.test(match)) { cls = 'null'; } return '<span class="' + cls + '">' + match + '</span>'; }); } //将请求结果转为json格式的函数 function ToJSON() { console.log(responsecontent); var Res = JSON.parse(responsecontent, null, 3); document.getElementById("jsonresult").innerHTML = syntaxHighlight(Res); } </script> <style> pre { background-color:rgb(238, 231, 231); outline: 1px solid #ccc; padding: 5px; margin: 5px; } .string { color: rgb(22, 10, 126); } .number { color: rgb(13, 214, 124); } .boolean { color: rgb(225, 97, 195); } .null { color: rgb(172, 167, 14); } .key { color: #cf4914; } #myDiv { background-image: url("https://img2.baidu.com/it/u=1721953618,4133119400&fm=253&fmt=auto&app=138&f=JPEG");} </style> </head> <body> <div id="myDiv"> <label id="currenttime" style="color: #AC2925; "></label> <form style="color:#2572adfa;border:2px"> <label>请输入页数(如5)</label><input type="text" value="5" id="pageid"/><br> <label>请输入页面大小(15)</label><input type="text" value="15" id="pagesize"/> </form> <button type="button" onclick="SendXMLHttpRequest()">1、利用XMLHttpRequest发送请求</button> <p id="result" style="color:#b0a117fa"></p> <button type="button" disabled="false" onclick="ToJSON()" id="convertjson">2、将请求结果转为json格式</button> <pre id="jsonresult" class="pre"></pre> </div> </body></html>3.2.1.1.2 jQuery-get.html 运行结果

3.2.1.2 post实例(jQuery)3.2.1.2.1 jQuery-post.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>HTML页面测试XHR请求 By jing_zhong</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> //获取系统当前时间的函数 function gettime(){ var a = new Date(); var b = a.toLocaleTimeString(); var c = a.toLocaleDateString(); document.getElementById("currenttime").innerHTML = c+"&nbsp"+b +" By jing_zhong"; } setInterval(function() {gettime()},1000); var responsecontent; //发送HTTP请求的函数 function SendXMLHttpRequest() { var url="http://112.125.90.247:81/api/Data/Post"; $.post(url, { "Id": "string", "Name": "string", "X": 1234, "Y": 4567, "Num": 0, "Note": "string", "Attachment": "string", "CreateTime": "2022-07-19T15:33:28.504Z", "UpdateTime": "2022-07-19T15:33:28.504Z" }).done(function(res){ alert("数据: " + JSON.stringify(res)); responsecontent = JSON.stringify(res); var Res = "成功获取HTTP响应如下: "+"\n"+responsecontent; document.getElementById("result").innerText = Res; document.getElementById("convertjson").disabled = false; document.getElementById("jsonresult").innerText = ""; }); } //对json数据进行高亮的函数 function syntaxHighlight(json) { if (typeof json != 'string') { json = JSON.stringify(json, undefined, 2); } json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) { var cls = 'number'; if (/^"/.test(match)) { if (/:$/.test(match)) { cls = 'key'; } else { cls = 'string'; } } else if (/true|false/.test(match)) { cls = 'boolean'; } else if (/null/.test(match)) { cls = 'null'; } return '<span class="' + cls + '">' + match + '</span>'; }); } //将请求结果转为json格式的函数 function ToJSON() { console.log(responsecontent); var Res = JSON.parse(responsecontent, null, 3); document.getElementById("jsonresult").innerHTML = syntaxHighlight(Res); } </script> <style> pre { background-color:rgb(238, 231, 231); outline: 1px solid #ccc; padding: 5px; margin: 5px; } .string { color: rgb(22, 10, 126); } .number { color: rgb(13, 214, 124); } .boolean { color: rgb(225, 97, 195); } .null { color: rgb(172, 167, 14); } .key { color: #cf4914; } #myDiv { background-image: url("https://img2.baidu.com/it/u=1721953618,4133119400&fm=253&fmt=auto&app=138&f=JPEG");} </style> </head> <body> <div id="myDiv"> <label id="currenttime" style="color: #AC2925; "></label> <button type="button" onclick="SendXMLHttpRequest()">1、利用XMLHttpRequest发送请求</button> <p id="result" style="color:#b0a117fa"></p> <button type="button" disabled="false" onclick="ToJSON()" id="convertjson">2、将请求结果转为json格式</button> <pre id="jsonresult" class="pre"></pre> </div> </body></html>3.2.1.2.2 jQuery-post.html 运行结果

3.2.2 Ajax简介及使用

        Ajax的全称为Asynchronous JavaScript and XML异步 JavaScript 和 XML,它的作用是在无需刷新整个页面的条件下,通过与远端服务器交换数据来实现网页内容的局部更新,优点是能够提高用户体验,较少网络数据的传输量。         XMLHttpRequest 对象是Ajax技术的一部分。使用 Ajax可以调用XMLHttpRequest API 在浏览器和服务器之间传递数据,而无需重新加载网页。Ajax请求数据最核心的依赖是浏览器提供的XMLHttpRequest对象,因为请求是异步的,可以让浏览器发出HTTP请求与接收HTTP响应,同时接着做其他事情,等收到XHR返回来的数据再对页面进行渲染。然而,各种浏览器以不同的方式来实现 Ajax API,这就意味着开发人员在编写代码时要考虑不同浏览器的兼容性,以确保 Ajax 可以通用。不过,jQuery 对 Ajax 支持,提供了功能齐全的 $.ajax() 方法,能够直接调用。大多数的 jQuery 和Ajax应用程序实际上并不使用 XML,反而将数据传输为纯 HTML 或 JSON。         另外,尽管Ajax 不能跨域工作,如由于违反了同源策略而无法从 example1.com 加载的网页向 example2.com 发出 Ajax 请求。作为一种解决方法,JSONP通过在html中使用script标签从另一个域加载包含任意 JavaScript 内容和 JSON 的文件。同时浏览器也实现了一种称为跨域资源共享 (CORS) 的技术,该技术也允许 Ajax 请求到不同的域。

3.2.2.1 get实例(ajax)3.2.2.1.1 ajax-get.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>HTML页面测试XHR请求 By jing_zhong</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> //获取系统当前时间的函数 function gettime(){ var a = new Date(); var b = a.toLocaleTimeString(); var c = a.toLocaleDateString(); document.getElementById("currenttime").innerHTML = c+"&nbsp"+b +" By jing_zhong"; } setInterval(function() {gettime()},1000); var responsecontent; //发送HTTP请求的函数 function SendXMLHttpRequest() { var pageid = document.getElementById("pageid").value; var pagesize = document.getElementById("pagesize").value; if(!isNaN(Number(pageid)) && !isNaN(Number(pagesize))){ // Using the core $.ajax() method $.ajax({ url: "http://112.125.90.247:81/api/Log4Net/GetAsync",// The URL for the request data: { page: pageid, intPageSize: pagesize },// The data to send (will be converted to a query string) type: "GET",// Whether this is a POST or GET request }).done(function( res ) { responsecontent = JSON.stringify(res.response.data); var Res = "成功获取HTTP响应,得到第"+pageid+"页共"+pagesize+"个结果!\n"+responsecontent; document.getElementById("result").innerText = Res; document.getElementById("convertjson").disabled = false; document.getElementById("jsonresult").innerText = ""; }); }else{ window.alert("请输入整数!"); document.getElementById("result").innerText = ""; document.getElementById("convertjson").disabled = true; responsecontent = ""; } } //对json数据进行高亮的函数 function syntaxHighlight(json) { if (typeof json != 'string') { json = JSON.stringify(json, undefined, 2); } json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) { var cls = 'number'; if (/^"/.test(match)) { if (/:$/.test(match)) { cls = 'key'; } else { cls = 'string'; } } else if (/true|false/.test(match)) { cls = 'boolean'; } else if (/null/.test(match)) { cls = 'null'; } return '<span class="' + cls + '">' + match + '</span>'; }); } //将请求结果转为json格式的函数 function ToJSON() { console.log(responsecontent); var Res = JSON.parse(responsecontent, null, 3); document.getElementById("jsonresult").innerHTML = syntaxHighlight(Res); } </script> <style> pre { background-color:rgb(238, 231, 231); outline: 1px solid #ccc; padding: 5px; margin: 5px; } .string { color: rgb(22, 10, 126); } .number { color: rgb(13, 214, 124); } .boolean { color: rgb(225, 97, 195); } .null { color: rgb(172, 167, 14); } .key { color: #cf4914; } #myDiv { background-image: url("https://img2.baidu.com/it/u=1721953618,4133119400&fm=253&fmt=auto&app=138&f=JPEG");} </style> </head> <body> <div id="myDiv"> <label id="currenttime" style="color: #AC2925; "></label> <form style="color:#2572adfa;border:2px"> <label>请输入页数(如5)</label><input type="text" value="5" id="pageid"/><br> <label>请输入页面大小(15)</label><input type="text" value="15" id="pagesize"/> </form> <button type="button" onclick="SendXMLHttpRequest()">1、利用XMLHttpRequest发送请求</button> <p id="result" style="color:#b0a117fa"></p> <button type="button" disabled="false" onclick="ToJSON()" id="convertjson">2、将请求结果转为json格式</button> <pre id="jsonresult" class="pre"></pre> </div> </body></html>3.2.2.1.2 ajax-get.html 运行结果

3.2.2.2 post实例(ajax)3.2.2.2.1 ajax-post.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>HTML页面测试XHR请求 By jing_zhong</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> //获取系统当前时间的函数 function gettime(){ var a = new Date(); var b = a.toLocaleTimeString(); var c = a.toLocaleDateString(); document.getElementById("currenttime").innerHTML = c+"&nbsp"+b +" By jing_zhong"; } setInterval(function() {gettime()},1000); var responsecontent; //发送HTTP请求的函数 function SendXMLHttpRequest() { // Using the core $.ajax() method $.ajax({ url: "http://112.125.90.247:81/api/Data/Post",// The URL for the request data: { "Id": "string", "Name": "string", "X": 123, "Y": 456, "Num": 0, "Note": "string", "Attachment": "string", "CreateTime": "2022-07-19T15:33:28.504Z", "UpdateTime": "2022-07-19T15:33:28.504Z" },// The data to send (will be converted to a query string) type: "POST",// Whether this is a POST or GET request }).done(function( res ) { responsecontent = JSON.stringify(res); var Res = "成功获取HTTP响应(如下):"+"\n"+responsecontent; document.getElementById("result").innerText = Res; document.getElementById("convertjson").disabled = false; document.getElementById("jsonresult").innerText = ""; }); } //对json数据进行高亮的函数 function syntaxHighlight(json) { if (typeof json != 'string') { json = JSON.stringify(json, undefined, 2); } json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) { var cls = 'number'; if (/^"/.test(match)) { if (/:$/.test(match)) { cls = 'key'; } else { cls = 'string'; } } else if (/true|false/.test(match)) { cls = 'boolean'; } else if (/null/.test(match)) { cls = 'null'; } return '<span class="' + cls + '">' + match + '</span>'; }); } //将请求结果转为json格式的函数 function ToJSON() { console.log(responsecontent); var Res = JSON.parse(responsecontent, null, 3); document.getElementById("jsonresult").innerHTML = syntaxHighlight(Res); } </script> <style> pre { background-color:rgb(238, 231, 231); outline: 1px solid #ccc; padding: 5px; margin: 5px; } .string { color: rgb(22, 10, 126); } .number { color: rgb(13, 214, 124); } .boolean { color: rgb(225, 97, 195); } .null { color: rgb(172, 167, 14); } .key { color: #cf4914; } #myDiv { background-image: url("https://img2.baidu.com/it/u=1721953618,4133119400&fm=253&fmt=auto&app=138&f=JPEG");} </style> </head> <body> <div id="myDiv"> <label id="currenttime" style="color: #AC2925; "></label> <button type="button" onclick="SendXMLHttpRequest()">1、利用XMLHttpRequest发送请求</button> <p id="result" style="color:#b0a117fa"></p> <button type="button" disabled="false" onclick="ToJSON()" id="convertjson">2、将请求结果转为json格式</button> <pre id="jsonresult" class="pre"></pre> </div> </body></html>3.2.2.2.2 ajax-post.html 运行结果

3.3 axios(引入axios库)

        axios是一个简洁、易用且高效的http库,本质上也封装成了js库,在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。对于axios的使用,一方面,可通过在html文件中利用script标签进行本地或在线引入js文件进行调用;另一方面,如果使用Nodejs开发Web项目,则通过Node包管理工具npm进行命令行安装npm install axios。

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

或者

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>3.3.1 get实例(axios)3.3.1.1 axios-get.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>HTML页面测试XHR请求 By jing_zhong</title> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> //获取系统当前时间的函数 function gettime(){ var a = new Date(); var b = a.toLocaleTimeString(); var c = a.toLocaleDateString(); document.getElementById("currenttime").innerHTML = c+"&nbsp"+b +" By jing_zhong"; } setInterval(function() {gettime()},1000); var responsecontent; //发送HTTP请求的函数 function SendXMLHttpRequest() { var pageid = document.getElementById("pageid").value; var pagesize = document.getElementById("pagesize").value; if(!isNaN(Number(pageid)) && !isNaN(Number(pagesize))){ axios({ method: 'get', url: "http://112.125.90.247:81/api/Log4Net/GetAsync?page="+pageid+"&intPageSize="+pagesize }) .then(function (response) { responsecontent = JSON.stringify(response.data.response.data); var Res = "成功获取HTTP响应,得到第"+pageid+"页共"+pagesize+"个结果!\n"+responsecontent; document.getElementById("result").innerText = Res; document.getElementById("convertjson").disabled = false; document.getElementById("jsonresult").innerText = ""; }); }else{ window.alert("请输入整数!"); document.getElementById("result").innerText = ""; document.getElementById("convertjson").disabled = true; responsecontent = ""; } } //对json数据进行高亮的函数 function syntaxHighlight(json) { if (typeof json != 'string') { json = JSON.stringify(json, undefined, 2); } json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) { var cls = 'number'; if (/^"/.test(match)) { if (/:$/.test(match)) { cls = 'key'; } else { cls = 'string'; } } else if (/true|false/.test(match)) { cls = 'boolean'; } else if (/null/.test(match)) { cls = 'null'; } return '<span class="' + cls + '">' + match + '</span>'; }); } //将请求结果转为json格式的函数 function ToJSON() { console.log(responsecontent); var Res = JSON.parse(responsecontent, null, 3); document.getElementById("jsonresult").innerHTML = syntaxHighlight(Res); } </script> <style> pre { background-color:rgb(238, 231, 231); outline: 1px solid #ccc; padding: 5px; margin: 5px; } .string { color: rgb(22, 10, 126); } .number { color: rgb(13, 214, 124); } .boolean { color: rgb(225, 97, 195); } .null { color: rgb(172, 167, 14); } .key { color: #cf4914; } #myDiv { background-image: url("https://img2.baidu.com/it/u=1721953618,4133119400&fm=253&fmt=auto&app=138&f=JPEG");} </style> </head> <body> <div id="myDiv"> <label id="currenttime" style="color: #AC2925; "></label> <form style="color:#2572adfa;border:2px"> <label>请输入页数(如5)</label><input type="text" value="5" id="pageid"/><br> <label>请输入页面大小(15)</label><input type="text" value="15" id="pagesize"/> </form> <button type="button" onclick="SendXMLHttpRequest()">1、利用XMLHttpRequest发送请求</button> <p id="result" style="color:#b0a117fa"></p> <button type="button" disabled="false" onclick="ToJSON()" id="convertjson">2、将请求结果转为json格式</button> <pre id="jsonresult" class="pre"></pre> </div> </body></html>3.3.1.2 axios-get.html 运行结果

3.3.2 post实例(axios)3.3.2.1 axios-post.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>HTML页面测试XHR请求 By jing_zhong</title> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> //获取系统当前时间的函数 function gettime(){ var a = new Date(); var b = a.toLocaleTimeString(); var c = a.toLocaleDateString(); document.getElementById("currenttime").innerHTML = c+"&nbsp"+b +" By jing_zhong"; } setInterval(function() {gettime()},1000); var responsecontent; //发送HTTP请求的函数 function SendXMLHttpRequest() { axios({ method: 'post', url: "http://112.125.90.247:81/api/Data/Post", data: { "Id": "string", "Name": "string", "X": 123, "Y": 456, "Num": 0, "Note": "string", "Attachment": "string", "CreateTime": "2022-07-19T15:33:28.504Z", "UpdateTime": "2022-07-19T15:33:28.504Z" }, //baseURL: 'http://112.125.90.247:81/',//http://112.125.90.247:81/api/Data/Post timeout: 1000, headers: {'Content-Type':'application/x-www-form-urlencoded'} }).then(function (response) { responsecontent = JSON.stringify(response.data); var Res = "成功获取HTTP响应,得到结果!\n"+responsecontent; document.getElementById("result").innerText = Res; document.getElementById("convertjson").disabled = false; document.getElementById("jsonresult").innerText = ""; }).catch(function(error){ console.log('error:' + error); }) } //对json数据进行高亮的函数 function syntaxHighlight(json) { if (typeof json != 'string') { json = JSON.stringify(json, undefined, 2); } json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) { var cls = 'number'; if (/^"/.test(match)) { if (/:$/.test(match)) { cls = 'key'; } else { cls = 'string'; } } else if (/true|false/.test(match)) { cls = 'boolean'; } else if (/null/.test(match)) { cls = 'null'; } return '<span class="' + cls + '">' + match + '</span>'; }); } //将请求结果转为json格式的函数 function ToJSON() { console.log(responsecontent); var Res = JSON.parse(responsecontent, null, 3); document.getElementById("jsonresult").innerHTML = syntaxHighlight(Res); } </script> <style> pre { background-color:rgb(238, 231, 231); outline: 1px solid #ccc; padding: 5px; margin: 5px; } .string { color: rgb(22, 10, 126); } .number { color: rgb(13, 214, 124); } .boolean { color: rgb(225, 97, 195); } .null { color: rgb(172, 167, 14); } .key { color: #cf4914; } #myDiv { background-image: url("https://img2.baidu.com/it/u=1721953618,4133119400&fm=253&fmt=auto&app=138&f=JPEG");} </style> </head> <body> <div id="myDiv"> <label id="currenttime" style="color: #AC2925; "></label> <button type="button" onclick="SendXMLHttpRequest()">1、利用XMLHttpRequest发送请求</button> <p id="result" style="color:#b0a117fa"></p> <button type="button" disabled="false" onclick="ToJSON()" id="convertjson">2、将请求结果转为json格式</button> <pre id="jsonresult" class="pre"></pre> </div> </body></html>3.3.2.2 axios-post.html 运行结果

4、总结

        XMLHttpRequest是浏览器所支持原生js的方法,可直接调用;而jQuery和Ajax均需要依赖jQurey库;而axios多用于Nodejs管理的Vue、React等项目中,作为典型的前后端分离API调用,通常需要处理跨域请求问题,针对跨域问题的解决办法在axios官网都有详细介绍,此处不再赘述。当axios用于html中进行Post请求,需要注意设置headers参数以得到成功的请求结果,亲身实践,多多感悟😁😁😁!!!

未设置header参数而报错

设置header参数headers: {'Content-Type':'application/x-www-form-urlencoded'}

注:所用后台API实例来源于网络,仅供个人学习和研究其设计思想而交流使用,切勿频繁调用和非法商用。

本文链接地址:https://www.jiuchutong.com/zhishi/294557.html 转载请保留说明!

上一篇:一键免费部署你的私人 ChatGPT 网站(一键部署web应用)

下一篇:swapoff命令 关闭SWAP交换分区(关停所有swap分区的命令)

  • 电脑微信聊天记录怎么转移到手机(电脑微信聊天记录怎么导出成文档)

    电脑微信聊天记录怎么转移到手机(电脑微信聊天记录怎么导出成文档)

  • 苹果11重启(苹果11重启是什么原因)

    苹果11重启(苹果11重启是什么原因)

  • mate30pro能插内存卡吗(华为mate30pro可以插内存卡)

    mate30pro能插内存卡吗(华为mate30pro可以插内存卡)

  • 华为手机怎么拼图片(华为手机怎么拼图合成一片)

    华为手机怎么拼图片(华为手机怎么拼图合成一片)

  • 陌陌拉黑对方知道吗(陌陌拉黑之后对方能看到资料吗)

    陌陌拉黑对方知道吗(陌陌拉黑之后对方能看到资料吗)

  • 华为cdy-tn00是什么型号(华为CDYTN00是什么型号手机)

    华为cdy-tn00是什么型号(华为CDYTN00是什么型号手机)

  • 微信语音电话静音对方能听到吗(微信语音电话静音了会被看出来)

    微信语音电话静音对方能听到吗(微信语音电话静音了会被看出来)

  • 魅族ba611是啥型号(魅族型号m681q)

    魅族ba611是啥型号(魅族型号m681q)

  • 安卓手机如何打开.mdf文件(安卓手机如何打开.xy文件)

    安卓手机如何打开.mdf文件(安卓手机如何打开.xy文件)

  • 8p充电慢是怎么回事(8p充电速度突然变慢了)

    8p充电慢是怎么回事(8p充电速度突然变慢了)

  • 手机钉钉和电脑钉钉能同时登录吗(手机钉钉和电脑怎么连接)

    手机钉钉和电脑钉钉能同时登录吗(手机钉钉和电脑怎么连接)

  • airpods会闪灯吗(airpods会不会闪灯)

    airpods会闪灯吗(airpods会不会闪灯)

  • 顶端标题行怎么设置(顶端标题行怎么设置不了)

    顶端标题行怎么设置(顶端标题行怎么设置不了)

  • 快手个人主页怎么找(快手个人主页怎么挂小黄车)

    快手个人主页怎么找(快手个人主页怎么挂小黄车)

  • 红米note8应用全屏显示怎么设置(红米note8应用锁怎么取消)

    红米note8应用全屏显示怎么设置(红米note8应用锁怎么取消)

  • 手机文件怎么传到电脑(手机文件怎么传到u盘上)

    手机文件怎么传到电脑(手机文件怎么传到u盘上)

  • 华为p30为什么来信息不提示(华为p30为什么来微信页面看不到要点进去)

    华为p30为什么来信息不提示(华为p30为什么来微信页面看不到要点进去)

  • 前端设计和ui设计的区别是什么(ui设计和前端工程师的关系)

    前端设计和ui设计的区别是什么(ui设计和前端工程师的关系)

  • 苹果6来电没声音怎么办(苹果来电没声音)

    苹果6来电没声音怎么办(苹果来电没声音)

  • 苹果手机怎么关闭推送服务(苹果手机怎么关静音)

    苹果手机怎么关闭推送服务(苹果手机怎么关静音)

  • vivo手机相册怎样设置能和以前一样(vivo手机相册怎么加密)

    vivo手机相册怎样设置能和以前一样(vivo手机相册怎么加密)

  • iphonex的设备管理在哪里(iphonex的设备管理在哪里?)

    iphonex的设备管理在哪里(iphonex的设备管理在哪里?)

  • 2016070是小米几(2016051是小米几)

    2016070是小米几(2016051是小米几)

  • vivoy93手电筒在哪里(vivoy93手机手电筒打不开怎么办)

    vivoy93手电筒在哪里(vivoy93手机手电筒打不开怎么办)

  • 歌华机顶盒可以投屏吗(歌华机顶盒可以在别人家用吗?)

    歌华机顶盒可以投屏吗(歌华机顶盒可以在别人家用吗?)

  • 诈骗信息查询让您拥有火眼金睛(诈骗犯查询)

    诈骗信息查询让您拥有火眼金睛(诈骗犯查询)

  • 海峡群岛附近巨藻林中的加利福尼亚海狮 (© Nature Picture Library/Alamy)(海峡群岛属于哪个洲)

    海峡群岛附近巨藻林中的加利福尼亚海狮 (© Nature Picture Library/Alamy)(海峡群岛属于哪个洲)

  • 自然人电子税务局
  • 适用综合所得税率表
  • 城建税和教育费附加减免政策
  • 企业股东分红怎么交税
  • 最惠国税是一种真正意义上的优惠关税
  • 用人单位延迟给员工交社保怎么办
  • 销货退回的税务处理
  • 不付加工费怎么办
  • 国际贸易公司注册需要什么条件海南
  • 总公司和分公司类型必须一样么
  • 国有资产报废如何委托拍卖公司
  • 用现金暂付职工差旅费3000元
  • 收到0税率的增值税发票
  • 电梯提供安装的增值税税率最新的
  • 查补以前年度所得税如何填写申报表
  • 个人取得的咨询费是什么
  • 当天开的进项发票怎么开
  • 新成立的公司如何建账
  • 减税的案例
  • 网络信息化服务中心是干嘛的
  • 租赁合同印花税双方都要交吗
  • 现在地税发票还要交税吗
  • 增值税进项税抵扣规定
  • 税务领取发票后怎么操作
  • 宣传费开票属于什么费用
  • 个人收到支票如何做账
  • 汇算清缴申报后怎样撤销
  • 本月已认证发票还能撤销吗
  • 工程储备的材料是存货吗
  • 个体户税务年报每年什么时候
  • 当月没有进项税额抵扣怎么办
  • 境内向境外提供服务免征增值税
  • 建安企业核定征收改查账征收后怎么处理账目
  • 酒店另外收电费
  • windows10更新怎么办
  • 评标专家评审费应该谁来付
  • 农产品抵扣进项税额转出
  • 少收的应收款和应付账款
  • 增值税发票红字发票怎么开具
  • php foreach()
  • 高新技术企业研发费用占比要求
  • 培训公司要交哪些税
  • 云质信息
  • 帝国cms功能
  • 运输发票备注栏里一般需要备注的内容包括
  • 应交所得税的科目是什么
  • 银行账户收费开什么发票
  • 货款分批付的会计分录
  • 预收账款挂多久确认收入
  • 在建工程盘盈盘亏的账务处理
  • 固定资产折旧计算方法公式大全
  • 汽车维修公司做账基本流程
  • 在建工程的土地可以查封吗
  • 其他权益工具账面价值
  • 房产置换怎么做
  • 增值税专用发票怎么开
  • 汇算清缴退费怎么入账
  • 收到的普通发票被对方作废
  • 收到不是股东的现金
  • 应收账款周转天数越大说明什么
  • mysql5.7.19 winx64解压缩版安装配置教程
  • ubuntu 手动安装
  • win8系统如何安装软件
  • win8怎么让我的电脑显示在桌面上
  • 巧用护手霜保养皮衣
  • solaris root密码过期
  • win8wifi受限
  • centos安装位置选择
  • 与web站点和web页面
  • win10链接手机怎么用
  • 日历显示不全
  • js浏览器打印
  • unity出现bug
  • opengl自学
  • python该怎么用
  • jni静态注册和动态注册
  • js的异步解决方案有哪些
  • 深入浅出nginx实战
  • python怎么写爬虫
  • python3 flask
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设