关于Ajax查询天气的经典案例（利用模板引擎）代码全讲解

最新推荐文章于 2024-04-22 15:07:14 发布

我，小李！

最新推荐文章于 2024-04-22 15:07:14 发布

阅读量761

点赞数 2

文章标签： javascript vscode css ajax jquery

本文链接：https://blog.csdn.net/zhixuejia/article/details/119208824

版权

主要思路：分析我们要干的事

1.首先引入模板引擎、JQ文件
2.搭建html页面
3.给button绑定事件

   1.首先我们获取到输入框的值
   2.然后引入Ajax($.ajax({}))
   3.给url地址
   4.给服务器传输数据
   5.期望返回值为json
   6.成功后获取返回值打印出来观察数据格式那部分是我们想要的
   7.定义模板引擎在里面写好我们期望的代码格式并对数据进行遍历
   8.引用引擎模板将其给到html页面

<!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>Document</title>
</head>

<body>
    <input type="text">
    <button>查询</button>
    <div class="wrapper"></div>
    <script type="text/html" id="template">
            <table border='1' width='800px'>
                    <thead>
                        <th>日期</th>
                        <th>气温</th>
                        <th>风力</th>
                        <th>低温</th>
                        <th>风向</th>
                    </thead>
            <tbody>
                <!-- 7.定义模板引擎在里面写好我们期望的代码格式并对数据进行遍历 -->
                {{each weather}}
                <tr>
                    <td>{{$value.date}}</td>
                    <td>>{{$value.fengli}}</td>
                    <td>{{$value.fengxiang}}</td>
                    <td>{{$value.low}}-{{$value.high}}</td>
                    <td>{{$value.type}}</td>
                </tr>
                {{/each}}
            </tbody>
    </table>
    </script>
    <script src="../../第一天/day01/code/js/jquery.js"></script>
    <script src="../day02/code/js/template-web.js"></script>
    <script>
        $(function () {
            $('button').click(function () {
                // 1.首先我们获取到输入框的值
                let Geting = $('input').val()
                // 2.然后引入Ajax
                $.ajax({
                    // 3.给url地址
                    url: 'http://wthrcdn.etouch.cn/weather_mini',
                    // 4.给服务器传输数据
                    data: { city: Geting },
                    // 5.期望返回值为json
                    dataType: 'json',

                    success: function (response) {
                        // 6.成功后获取返回值打印出来观察数据格式那部分是我们想要的
                        console.log(response);
                        let data = response.data;
                        let weather = data.forecast;
                        // 8.引用引擎模板将其给到html页面
                        var html = template('template', {
                            weather: weather,
                            city: Geting
                        });
                        $('.wrapper').html(html)
                    }
                })
            })
        })
    </script>
</body>

</html>

最终实现效果

我，小李！

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
3
评论
关于Ajax查询天气的经典案例（利用模板引擎）代码全讲解

主要思路：分析我们要干的事1.首先引入模板引擎、JQ文件2.搭建html页面3.给button绑定事件 1.首先我们获取到输入框的值 2.然后引入Ajax($.ajax({})) 3.给url地址 4.给服务器传输数据 5.期望返回值为json 6.成功后获取返回值打印出来观察数据格式那部分是我们想要的 7.定义模板引擎在里面写好我们期望的代码格式并对数据进行遍历 8.引用引擎模板将其给到html页面<!DOCTYPE...
复制链接

扫一扫