前端html发送http GET请求（含案例 、含代码）
资料文献地址： 资料文献 、 jQuery.get()、jQuery.post()
分类：快捷方法
案例 · 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="Description" content=""/>
<meta name="Keywords" content=""/>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>Ajax测试天气预报API</title>
</head>
<body>
<h1>天气查询</h1>
<input type="text" placeholder="请输出你的地区邮编编码" id="tel"/>
<button id="ajax">确定</button>
<p>查询结果：<span id="reslut"></span></p>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#ajax').on('click',function(){
var $telValue=$('#tel').val();
if($telValue=="") {
alert('不能为空！');
return;
}
$.ajax({
type: 'GET',
dataType:'jsonp',
jsonp:'callback',
jsonpCallback:'getName',
url: 'http://api.asilu.com/weather/',
data:{
"city":$telValue
},
beforeSend: function(request) {
//request.setRequestHeader("token", token);
alert("发送之前：回执信息");
},
success: function(data){
var reslutData=data;
console.log(reslutData);
alert(reslutData);
$('#reslut').text("你查询的是:"+reslutData.city+","+reslutData.date+","+"明天的天气是:"+reslutData.weather[0].weather);
},
error:function (e) {
console.log("error："+e);
}
})
})
})
</script>
</body>
</html>
效果图
- 略
以上就是关于 “前端发送http的get请求 - 代码篇“ 的全部内容。