vue1.0 版本ajax请求本地json

最新推荐文章于 2023-12-25 13:53:59 发布

bossxu_

最新推荐文章于 2023-12-25 13:53:59 发布

阅读量1k

点赞数

分类专栏： web前端开发文章标签： ajax 请求本地json 原生ajax 请求本地json vue 原生ajax 请求本地json json请求

本文链接：https://blog.csdn.net/bossxu_/article/details/80461318

版权

web前端开发专栏收录该内容

51 篇文章 2 订阅

订阅专栏

1.学习vue1.0 难免不了模拟本地请求json

1.1先引一个json 文件到自己的项目目录下

这里写图片描述

1.因为是vue1.0我这里用了最原始的原生js ajax的方法去请求json 这里特别要注意的是this 指向问题在进入方法的时候就要把this赋值给$this 然后再把获取到的数据赋值给我们定义的变量渲染到页面上

==正确js==

created:function(){
                var $this=this
                var xmlHttp = new XMLHttpRequest();
                xmlHttp.open('GET','../assets/vue.json','true');  //请求本地json   用get 方式请求    true  异步  false 同步
                xmlHttp.send()
                xmlHttp.onreadystatechange = function(data){
                    if(xmlHttp.readyState === 4 & xmlHttp.status === 200){  // 0.未初始化  1.启动  2.发送 3.接受 4.完成 
                        var obj=eval('('+data.currentTarget.response+')')
                         Vue.nextTick(()=>{
                          $this.jsonArr=obj.result;
                         })
                    }
                }
            },

==html==

<div id="app">
        <ul>
            <li v-for='(item, index) in jsonArr' :key="index">
                <span>{{ item.productId}}</span> - <span>{{ item.productName }}</span>- <span>{{ item.prodcutPrice }}</span>
            </li>
        </ul>

    </div>

==所有代码==

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>helloworld</title>
    <script type="text/javascript" src='../assets/js/vue.js'></script>
</head>
<body>
    <h1>helloworld 实例</h1>
    <hr>
    <div id="app">
        <ul>
            <li v-for='(item, index) in jsonArr' :key="index">
                <span>{{ item.productId}}</span> - <span>{{ item.productName }}</span>- <span>{{ item.prodcutPrice }}</span>
            </li>
        </ul>
        <hr>
         <p>{{ count }}</p>
         <p><button @click='add'>add</button></p>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{

                count:1,      
                jsonArr:[]

            },
            methods:{
                add:function(){
                    this.count++    
                }
            }, 
            created:function(){
                var $this=this
                var xmlHttp = new XMLHttpRequest();
                xmlHttp.open('GET','../assets/vue.json','true');  //请求本地json   用get 方式请求    true  异步  false 同步
                xmlHttp.send()
                xmlHttp.onreadystatechange = function(data){
                    if(xmlHttp.readyState === 4 & xmlHttp.status === 200){  // 0.未初始化  1.启动  2.发送 3.接受 4.完成 
                        var obj=eval('('+data.currentTarget.response+')')
                         Vue.nextTick(()=>{
                          $this.jsonArr=obj.result;
                         })
                    }
                }
            },


        })

    </script>
</body>
</html>