Vue＋XMLHttpRequest向后台发送请求基本使用demo

ℳ墨尔本

已于 2024-05-11 20:28:11 修改

阅读量401

点赞数 1

分类专栏：前端文章标签： vue.js javascript 前端

于 2023-03-28 10:00:08 首次发布

本文链接：https://blog.csdn.net/Jnsone/article/details/129809428

版权

前端专栏收录该内容

5 篇文章 2 订阅

订阅专栏

分享一下Vue与XMLHttpRequest的基本使用方法

XMLHttpRequest是一个浏览器提供的JavaScript API，用于在客户端与服务器之间进行异步通信。通过 XMLHttpRequest，Web 应用程序可以在不重新加载整个页面的情况下，将增量更新呈现在用户界面上。这是 AJAX（Asynchronous JavaScript and XML）技术的核心部分，AJAX 允许网页应用快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。

使用Vue可以直接使用Vue的cdn，或者使用cli构建，这里我们直接引入vue的cdn，先来写一个简单的html页面，使用v-for循环table表格，引入https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<style>
    th, td {
        border: 1px solid #e0e0e0;
        padding-left: 20px;
        font-weight: normal;
        border-right: none;
        border-left: none;
        height: 15px;
        width: 20px;
    }

    tr{
        height: 20px;
    }
</style>
<body>
<!--使用vue可以直接使用Vue的cdn，或者使用cli构建，这里我们直接引入vue的cdn-->
<div id="app">
    <button style="width: 60px;height: 30px;color: #1e9fff" @click="getData" v-bind:title="query1">query</button>
    <table style="border-spacing: 0;border-collapse: collapse;line-height: 35px;width: 100%;font-size: 14px">
        <tr>
            <th>corpName</th>
            <th>regNo</th>
            <th>orgName</th>
        </tr>

        <template v-for="item in dataList">
            <tr>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.type}}</td>
            </tr>
        </template>
    </table>
</div>
</body>
</html>

然后在script标签中new一个Vue实例，在data里写页面用到的数据对象，methods里写方法，创建一个XMLHttpRequest请求，在open方法中设置请求方式地址，send发送请求，在reponse中获取返回的数据。

<script>
    new Vue({
        el: '#app',
        data: {
            uri: "http://127.0.0.1:9999/querydata",
            query:'查询',
            message: 'Hello Vue!',
            dataList:[
                {
                    name:'22',
                    age:'11111',
                    type:'33333'
                }
            ]
        },

        methods: {
            getData() {
                //转入： this转为function()方法内部函数
                let that = this;
                let api = new XMLHttpRequest();
                api.open("get",this.uri,true);
                api.send();
                //这里设置返回值类型为json格式
                api.responseType = 'json';
                api.onreadystatechange = function (){
                	//readyState=='4'表示请求已完成，且响应已就绪
                    if(api.readyState == '4' && api.status == '200'){
                        console.log('success',api.response);
                        //给集合赋值
                        that.dataList = api.response.data.list;
                    }
                }
            }
        }
    })

</script>