让我们瞧瞧Ajax,jquery,fetch如何实现发送接口？

Virtual09
255 阅读3分钟

前言

    在前端，发送接口请求是件非常重要的事情。那么发送接口请求可以做什么呢？前端发起接口请求时现代Web应用中非常关键的一环，它使得应用程序能够与后端服务器通信，获取数据或者提交数据，从而实现动态内容的显示和操作，接下来在本文中,Virtual09将会为大家带来一个小Deom,展示不同的方法从接口获取数据！

正文

Ajax

    Ajax其核心在于XMLHttpRequset对象，这个对象在Web开发中可以用于后台与服务器交互数据，从而动态地更新页面。且Ajax允许网页从服务器异步请求数据。
实现步骤是这样的，首先我们要创建一个XMLHttpRequset对象，再配置请求类型(GET,POST)以及URL和是否异步，再发送接口请求，最后处理请求到的数据。

image.png

这里当我们点击获取电影列表这个按钮，就可以达到电影列表数据,我们看看是如何实现的？

<body>
    <button id="btn">获取电影列表</button>
    <ul id="list">
        
    </ul>

    <script>
        let btn = document.getElementById('btn');
        let ul = document.getElementById('list');
        btn.addEventListener('click',()=>{
       
            
            let xhr = new XMLHttpRequest();
            xhr.open('GET','https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList#!method=get',true);
            xhr.send();//发送请求
            xhr.onreadystatechange = ()=>{
                if(xhr.readyState == 4 && xhr.status == 200){ 
                    console.log(JSON.parse(xhr.responseText));
                    //展示在页面上
                    const movieList = JSON.parse(xhr.responseText).movieList; //获取movieList

                    for(let i = 0; i < movieList.length; i++){
                
                        const li = document.createElement("li");
                        li.innerText = movieList[i].nm + '--' + movieList[i].star;
                        ul.appendChild(li); 
                        
                    }

                }
            }
        })
    </script>
</body>

我们先拿到html部分中我们需要进行操作的标签

let btn = document.getElementById('btn');
let ul = document.getElementById('list');

使用addEventListener对btn按钮进行点击事件的监听，当我们触发点击事件，就会先创建一个AJAX实例对象，然后open()方法是进行一些请求配置xhr.open(method, url, async),第一个参数填请求方法，第二个参数是请求的地址，第三个参数是表示是否是异步。当我们写完配置，就需要发生请求，使用send()方法。接着发送了请求，我们需要对请求过程进行监听onreadystatechange(),来到这里我们就要先了解下readyStateAJAX的状态,一共有5种状态，0表示实例化对象xhr刚刚创建好,1表示请求配置open刚刚执行,2表示send()发送接口请求，响应头被接受,3响应体正在被解析,4解析完成。这里我们监听请求的过程，需要判断发送请求是否是正常的，所以我们需要对Ajax和接口请求的状态进行判断，Ajax的状态需要为4,接口请求的状态需要为200.如果一切正常，我们就需要对获取的数据进行处理，需要注意的是，我们获取到的数据是一个JSON对象，我们需要把它转化成String,所以我们使用JSON.parse()方法处理数据，最后把数据添加到ul中即可。

jquery发送接口

使用jquery我们需要引入它的CDN

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <button id="btn">jquery获取电影列表</button>
    <ul id="list">
        
    </ul>

    <script>
        let btn = document.getElementById('btn');
        let ul = document.getElementById('list');
        btn.addEventListener('click',()=>{
            $.ajax({
                url:'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList#!method=get',
                method:'GET',
                success:function(res){
                    console.log(res);
                }
            })
        })
    </script>
</body>

使用jquery会比较简洁一点，我们使用$符号，调用ajax传入一个对象，这个对象需要写好，我们想要访问的接口，以及method，我们使用的是GET还是POST方法。，在success中的函数会接收一个参数，这个参数就是我们向接口拿到的数据。

image.png

fetch发送接口

我们使用fetch获取接口请求的话，它会返回一个Promise对象，这就需要使用.then来回调处理数据了。

<body>
    <button id="btn">fetch获取电影列表</button>
    <ul id="list">
        
    </ul>

    <script>
        let btn = document.getElementById('btn');
        let ul = document.getElementById('list');
        btn.addEventListener('click',()=>{
           fetch("https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList#!method=get")
           .then((res)=>
            return res.json();
           })
           .then((data)=>{
            console.log(data);
           })
        })
    </script>
</body>

值得注意的是我们.then中return出来的数据，会返回给下一个.then接收。我们打印一下数据看看

image.png

数据也是成功获取到了。

那么文章到此也就结束了，感谢大家阅读，若有不足，恳请指出。

avatar
文章
阅读
粉丝