Ajax请求的发送-天气预报案例
天气预报接口：http://wthrcdn.etouch.cn/weather_mini?city=商洛
js原生代码的发送
<!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>天知道</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="wrap" id="app">
<div class="search_form">
<div class="logo"><img src="img/logo.png" alt="logo" /></div>
<div class="form_group">
<input type="text" v-model="city" id="but" class="input_txt" placeholder="请输入查询的天气" />
<button class="input_sub" onclick="souSuo()" id="button">
搜 索
</button>
</div>
<div class="hotkey">
<a href="#;" onclick="BeiJing()">北京</a>
<a href="#;" onclick="ShangHai()">上海</a>
<a href="#;" onclick="GuangZhou()">广州</a>
<a href="#;" onclick="ShenZhen()">深圳</a>
</div>
</div>
<ul class="weather_list" id="UL">
<!-- <li v-for="item in weatherList">
<div class="info_type"><span class="iconfont">type</span></div>
<div class="info_temp">
<b>low</b>
~
<b>high</b>
</div>
<div class="info_date"><span>date</span></div>
</li> -->
</ul>
</div>
</body>
</html>
<script type="text/javascript">
var xmlhttp = new XMLHttpRequest();
var city = "";
function BeiJing() {
city = "北京";
souSuo();
}
function ShangHai() {
city = "上海";
souSuo();
}
function GuangZhou() {
city = "广州";
souSuo();
}
function ShenZhen() {
city = "深圳";
souSuo();
}
function souSuo() {
if (!city) {
city = document.getElementById("but").value;
}
//alert(cityStr);
xmlhttp.open("GET", "http://wthrcdn.etouch.cn/weather_mini?city=" + city, true);
xmlhttp.send();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//xmlhttp.responseText; 接收后台响应的json数据
var jsonStr = xmlhttp.responseText;
var JsonObj = JSON.parse(jsonStr);
console.log(JsonObj);
var arr = JsonObj.data.forecast;
var myUl = document.getElementById("UL");
var htm =
`<li v-for="item in weatherList">
<div class="info_type"><span class="iconfont">${JsonObj.data.yesterday.type}</span></div>
<div class="info_temp">
<b>${JsonObj.data.yesterday.low}</b>
~
<b>${JsonObj.data.yesterday.high}</b>
</div>
<div class="info_date"><span>${JsonObj.data.yesterday.date}</span></div>
</li>`;
for (let i = 0; i < arr.length; i++) {
htm +=
`<li v-for="item in weatherList">
<div class="info_type"><span class="iconfont">${arr[i].type}</span></div>
<div class="info_temp">
<b>${arr[i].low}</b>
~
<b>${arr[i].high}</b>
</div>
<div class="info_date"><span>${arr[i].date}</span></div>
</li>`;
}
myUl.innerHTML = htm
}
}
// 将city
city = "";
}
document.onkeydown = function(event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
if (e && e.keyCode == 13) {
souSuo();
}
}
</script>
JQuery发送
<!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>天知道</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="wrap" id="app">
<div class="search_form">
<div class="logo"><img src="img/logo.png" alt="logo" /></div>
<div class="form_group">
<input type="text" v-model="city" class="input_txt" placeholder="请输入查询的天气" id="input" />
<button class="input_sub" id="button">
搜 索
</button>
</div>
<div class="hotkey">
<a href="#">北京</a>
<a href="#">上海</a>
<a href="#">广州</a>
<a href="#">深圳</a>
</div>
</div>
<ul class="weather_list" id="MyUl">
<!-- <li v-for="item in weatherList">
<div class="info_type"><span class="iconfont">type</span></div>
<div class="info_temp">
<b>low</b>
~
<b>high</b>
</div>
<div class="info_date"><span>date</span></div>
</li> -->
</ul>
</div>
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var city = "";
$('a').click(function() {
city = $(this).text();
souSuo();
})
$('#button').on('click', function f() {
souSuo();
})
function souSuo() {
if (!city) {
city = $('#input').val();
}
$.getJSON("http://wthrcdn.etouch.cn/weather_mini?city=" + city, function(res) {
// 得到 请求数据 res
// console.log(res);
// 在ul下添加html。
var arr = res.data.forecast;
var lis =
`<li v-for="item in weatherList">
<div class="info_type"><span class="iconfont">${res.data.yesterday.type}</span></div>
<div class="info_temp">
<b>${res.data.yesterday.low}</b>
~
<b>${res.data.yesterday.high}</b>
</div>
<div class="info_date"><span>${res.data.yesterday.date}</span></div>
</li>`;
for (let i = 0; i < arr.length; i++) {
lis +=
`<li v-for="item in weatherList">
<div class="info_type"><span class="iconfont">${arr[i].type}</span></div>
<div class="info_temp">
<b>${arr[i].low}</b>
~
<b>${arr[i].high}</b>
</div>
<div class="info_date"><span>${arr[i].date}</span></div>
</li>`
}
var li = $(lis);
$('#MyUl').html(li);
})
city = "";
}
$(document).keypress(function(event){
if(event.keyCode == 13){
souSuo();
}
})
</script>
Vue发送
<!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>天知道</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/index.css" />
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="wrap" id="app">
<div class="search_form">
<div class="logo"><img src="img/logo.png" alt="logo" /></div>
<div class="form_group">
<input type="text" v-model="city" id="but" class="input_txt" placeholder="请输入查询的天气" @click="clean()" />
<button class="input_sub" id="button" @click="search()">
搜 索
</button>
</div>
<div class="hotkey">
<a href="#" @click="beiJing()">北京</a>
<a href="#" @click="shangHai()">上海</a>
<a href="#" @click="guangZhou()">广州</a>
<a href="#" @click="shenZhen()">深圳</a>
</div>
</div>
<ul class="weather_list" id="UL">
<li v-for="forecast in forecast">
<div class="info_type">
<span class="iconfont">{{forecast.type}}</span>
</div>
<div class="info_temp">
<b>{{forecast.low}}</b>
~
<b>{{forecast.high}}</b>
</div>
<div class="info_date"><span>{{forecast.date}}</span></div>
</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
city: '',
forecast: []
},
created() {
document.onkeydown = function(e) {
var key = window.event.keyCode;
if (key == 13) {
vm.search();
}
}
},
methods: {
search() {
axios.get('http://wthrcdn.etouch.cn/weather_mini', {
params: {
city: vm.city
}
}).then(function(res) {
//请求成功的处理，获取数据
var jsonObj = res.data;
vm.forecast = jsonObj.data.forecast.concat(jsonObj.data.yesterday);
// console.log(vm.forecast);
}).catch(function(error) { // 请求失败处理
console.log(error);
});
},
/* 给热门城市添加点击事件 */
beiJing() {
vm.city = '北京';
vm.search();
},
shangHai() {
vm.city = '上海';
vm.search();
},
guangZhou() {
vm.city = '广州';
vm.search();
},
shenZhen() {
vm.city = '深圳';
vm.search();
},
/* 用户单击输入框清除其内的数据 */
clean() {
vm.city = '';
}
}
})
</script>
Vue根据数据的改变改变视图，并不直接进行DOM操作。
164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
