美文网首页
零基础学Vue-最简单的http请求

零基础学Vue-最简单的http请求

作者: 望月成三人 | 来源:发表于2020-09-20 11:53 被阅读0次
  • vue代码
<html>
    <head>
        <meta charset="utf-8" />
        <title>发送请求</title>
        <style>
            #app {width: 200px; height: 200px; background-color: aqua;}
        </style>
    </head>
    <body>
        <div id="app">
                <button  @click="searchSeather">获取天气</button>
                <h3>直接发请求</h3>
                <p>{{city}}--{{temp}}</p>
                <form method="post" action="">
                    <!--prevent 提交事件不再重载页面  -->
                    <input type="text" name="usr"   />
                    <input type="submit" @click.prevent="searchSeatherForm" value="表单提交" />
                </form>
                <h2>表单提交后的数据</h2>
                <p>{{cityid}}--{{WD}}</p>
        </div>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let app = new Vue({
                el: "#app",
                data: {
                    city: "",
                    temp: "",
                    cityid: "",
                    WD: "",
                },
                methods:{
                        <!-- async表示异步请求,await 表示等待数据加载完成 -->
                    searchSeather:async function() {
                        let url = "weather.json"
                        let res = await fetch(url)
                        let result = await res.json()
                        this.city = result.weatherinfo.city
                        this.temp = result.weatherinfo.temp
                    },
                    searchSeatherForm:async function() {
                        let url = "weather.json"
                        let res = await fetch(url)
                        let result = await res.json()
                        this.cityid = result.weatherinfo.cityid
                        this.WD = result.weatherinfo.WD
                    }
                }
            })
        </script>
    </body>
</html>

  • json文件
{
    "weatherinfo": {
        "city": "北京",
        "cityid": "101010100",
        "temp": "27.9",
        "WD": "南风",
        "WS": "小于3级",
        "SD": "28%",
        "AP": "1002hPa",
        "njd": "暂无实况",
        "WSE": "<3",
        "time": "17:55",
        "sm": "2.1",
        "isRadar": "1",
        "Radar": "JC_RADAR_AZ9010_JB"
    }
}

相关文章

网友评论

      本文标题:零基础学Vue-最简单的http请求

      本文链接:https://www.haomeiwen.com/subject/ytwuyktx.html