2017-7-14

初探Ajax

因为上班接触到的东西比较杂也比较乱，就没有很系统。也罢，只是记录一下自己上班之外干了些什么，别让时间怎么流逝的都不知道。

之前一直在写静态页面，数据都是固定不变的，但是如果要改变起数据呢？数据不是固定的呢?要从其他地方获取数据该怎么获取呢？因此就去初探了一下Ajax这个一直都有听说，但也一直没有实际去玩过的技术。只是浅浅的玩耍了一下体验一下。用的是JQuery里封装的Ajax。

1. 用的方法是：$.ajax({});
2. $.ajax({type:’GET’,});这个type:’GET’是说明获取的类型是GET
3. $.ajax({type:’GET’,url:’http://resource.haorenao.cn/teas2.json‘,});url是获取数据的地址；
4. success: function(data){}这个函数表示这个过程成功了需要执行什么功能。

$(document).ready(function(){
            $.ajax({
                    type:'POST',
                url:"http://resource.haorenao.cn/teas2.json",
                success:function(data) {
                    var teas=data;
                    console.log(teas);
                    $.each(teas,function(key,value){
                        var title=value.title;
                        var image=value.image;
                        var price=value.price;
                        var html='<div style="width:330px;height:300px;float:left;text-align:center;margin:10px 0;">'+
                            '<h1 style="margin:0">'+title+'</h1>'+
                            '<img width="200" height="200" src="'+image+'">'+
                            '</div>';
                            $("#all_teas").append(html);
                    });
                }
            });
        });