<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>
{
"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"
}
}
网友评论