前端调用后端API获取数据的方法

jiangchubiu

已于 2023-09-07 08:39:29 修改

阅读量237

点赞数

文章标签： javascript 前端

于 2023-09-06 22:42:37 首次发布

本文链接：https://blog.csdn.net/jiangchubiu/article/details/132724704

版权

1. 学习内容

方法	特点
`XMLHttpRequest`	①无需引入外部库
`jQuery` 或 `Ajax`	①需要引入jQuery库
`axios`	①需要引入axios库 ②多用于Vue、React等项目 ③需要处理跨域请求

2. 学习目标

掌握前端js调用后端API的方法，并了解不同方法的特点

3. 学习成果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML页面测试XHR请求</title>
        <script>
            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, 1);
                }
                
                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; }
        </style>
    </head>
    <body>
        <div id="myDiv">
            <label id="currenttime" style="color: #AC2925; "></label>
            <form style="color:#2572adfa;border:2px">
                <label>请输入页码</label><input type="text" value="1" id="pageid"/><br>
                <label>请输入页数</label><input type="text" value="1" id="pagesize"/>
            </form>
            <button type="button" onclick="SendXMLHttpRequest()">1、利用XMLHttpRequest发送请求</button>
            <p id="result"></p>
            <button type="button" disabled="false" onclick="ToJSON()" id="convertjson">2、将请求结果转为json格式</button>
            <pre id="jsonresult" class="pre"></pre>
        </div>
    </body>
</html>