jquery的ajax回顾

前言：好久没有写过ajax今天有朋友问怎么写还不知道从什么地方下手，到最后还是从网上找到的方法。基础不牢固啊忘得太快记录一下，提醒自己平常多积累一下。。

写个小demo回顾一下 

1.html代码

<!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">
      <!-- 插入JQ -->
    <script src="jquery-1.11.3.js"></script>
    <title>Document</title>
</head>

<body>
    <button id="btn">点击</button>
    <table>
        <thead>
            <tr>
                <th>发布日期</th>
                <th>询价单</th>
                <th>买家</th>
                <th>集团</th>
                <th>求购数量</th>
                <th>发布日期</th>
                <th>联系买家</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

    
</body>

</html>

 

2.js代码

var html = '';

        var tbody = $('tbody');
        $("button").click(function() {
            $.ajax({
                url: "data.json",
                success: function(result) {
                  //直接处理json格式方法 
                    for (var i in result.data) {
                        console.log(result.data[i].date);
                        html += `<tr>
                            <td>${data[i].time}</td>
                            <td>${data[i].num}</td>
                            <td>${data[i].title}</td>
                            <td>${data[i].jituan}</td>
                            <td>${data[i].num}</td>
                            <td>${data[i].date}</td>
                            <td><button>联系买家</button></td>
                            </tr>`;
                    }

                    //转化为数组方法
                    //var data = eval(result.data);
                    // for (var i = 0; i < data.length; i++) {
                    //     html += `<tr>
                    //         <td>${data[i].time}</td>
                    //         <td>${data[i].num}</td>
                    //         <td>${data[i].title}</td>
                    //         <td>${data[i].jituan}</td>
                    //         <td>${data[i].num}</td>
                    //         <td>${data[i].date}</td>
                    //         <td><button>联系买家</button></td>
                    //         </tr>`;
                    // }
                    tbody.html(html);
                }
            });
        });

3.模拟数据json

{
    "code": 0,
    "data": [{
            "time": "2017-12-01",
            "title": "湖南粮油集团",
            "jituan": "湖南粮油集团",
            "num": 100,
            "date": "2017-1-1"
        },
        {
            "time": "2017-12-01",
            "title": "湖南粮油集团",
            "jituan": "湖南粮油集团",
            "num": 100,
            "date": "2017-1-2"
        }, {
            "time": "2017-12-01",
            "title": "湖南粮油集团",
            "jituan": "湖南粮油集团",
            "num": 100,
            "date": "2017-1-3"
        }, {
            "time": "2017-12-01",
            "title": "湖南粮油集团",
            "jituan": "湖南粮油集团",
            "num": 100,
            "date": "2017-1-4"
        }, {
            "time": "2017-12-01",
            "title": "湖南粮油集团",
            "jituan": "湖南粮油集团",
            "num": 100,
            "date": "2017-1-5"
        }, {
            "time": "2017-12-01",
            "title": "湖南粮油集团",
            "jituan": "湖南粮油集团",
            "num": 100,
            "date": "2017-1-6"
        }
    ]
}

 

posted on 2017-12-01 13:33  漫步潜行者  阅读(113)  评论(0)    收藏  举报

导航