前端发送http的get请求 - 代码篇

最新推荐文章于 2023-10-07 22:28:41 发布

草巾冒小子

最新推荐文章于 2023-10-07 22:28:41 发布

阅读量2.7k

点赞数

分类专栏： Vue.js 跨域请求

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/109448447

版权

Vue.js 同时被 2 个专栏收录

138 篇文章 10 订阅

订阅专栏

跨域请求

11 篇文章 0 订阅

订阅专栏

前端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>