Ajax实例1
Posted 唥小雨
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax实例1相关的知识，希望对你有一定的参考价值。
实例
- 原生的js写Ajax请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> ajax原生</title>
</head>
<body>
<div id="citybox"></div>
<button class="city" value="湛江" onclick="changcity(this)">湛江</button>
<button class="city" value="北京" onclick="changcity(this)">北京</button>
<button class="city" value="杭州" onclick="changcity(this)">杭州</button>
<button class="city" value="广州" onclick="changcity(this)">广州</button>
<button class="city" value="深圳" onclick="changcity(this)">深圳</button>
</body>
<script>
var city;
function changcity(that) {
// city = document.getElementsByClassName("city").value;
console.log(that.value);
city =that.value;
var xmlHttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
}
else {
// IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//请求地址
//设置请求头
// xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.open("GET", "http://wthrcdn.etouch.cn/weather_mini?city="+city, true);
xmlhttp.send();
xmlhttp.onreadystatechange = function () {
// console.log("发起请求种。。。。。。")
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var result = xmlhttp.responseText;
result = JSON.parse(result);
var data = result.data.forecast;
var box = "<div>"
for (var i = 0; i < data.length; i++) {
box += "<p>" + data[i].date;
box += data[i].fengli;
box += data[i].fengxiang;
box += data[i].high;
box += data[i].low;
box += data[i].type + "</p>";
}
box += "</div>"
document.getElementById("citybox").innerHTML = box;
// $("#city").html(box)
console.log(box);
} else {
console.log("请求失败");
}
}
}
</script>
</html>
1.才用JQuery框架写的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax用JQuery开发</title>
<!-- 引入js -->
<script src="./js/jquery.min.js"></script>
</head>
<body>
天气预报
<div id="city">
</div>
<button onclick="changcity(this)" value="湛江"> 湛江</button>
<button onclick="changcity(this)" value="杭州"> 杭州</button>
<button onclick="changcity(this)" value="深圳"> 深圳</button>
<button onclick="changcity(this)" value="广州"> 广州</button>
</body>
<script>
var city ="湛江";
function changcity(param) {
city=param.value
console.log(city)
$.ajax({
// url:"http://wthrcdn.etouch.cn/weather_mini?city="+city,
url:"http://wthrcdn.etouch.cn/weather_mini?city="+city,
method: "GET",
dataType: "json",
success: function(data){
var data =data.data.forecast;
var box ="<div>"
for(var i=0; i<data.length; i++){
box += "<p>"+data[i].date;
box += data[i].fengli;
box += data[i].fengxiang;
box += data[i].high;
box += data[i].low;
box += data[i].type +"</p>";
}
box += "</div>"
$("#city").html(box)
console.log(box);
// document.write(data)
// $('.city').html(data)
},
error: function(err){
console.log("请求失败",err)
}
});
}
</script>
</html>
以上是关于Ajax实例1的主要内容，如果未能解决你的问题，请参考以下文章