jQuery AJAX 学习总结

通过 HTTP 请求加载远程数据。

1.load() get() post() 函数

$('div').load('文件地址url','',fn) // 将文件加载到div标签中

2.$.ajax({}) 全局ajax

$.ajax({
    url:'url',
    type:'GET/POST',
    dataType:'xml/json/text/html/js/jsonp...',     // 从服务器获取到的数据类型
    data:'',
    error:function(error){
    console.log('服务器加载错误');
},
    success:function(msg){
    console.log('服务器加载成功');
}
});

 

AJAX 的难点其实在于对于加载数据的处理

我们可以试着加载本地的文件，来进行数据解析：

这是本地的json文件:

{
  "pageNum": 1,
  "pageTotal": 10,
  "list": [
    {
      "id": 1,
      "name": "张山",
      "sex": "男",
      "birthday": "2000.8",
      "phoneNum": 15823112345,
      "political": "党员",
      "QQ": 123456,
      "college": "电子信息工程与钱途",
      "major": "豫剧系",
      "createTime": 1486968841000
    },
    {
      "id": 2,
      "name": "李四",
      "sex": "男",
      "birthday": "1985.4",
      "phoneNum": 15823112111,
      "political": "普通群众",
      "QQ": 123243456,
      "college": "电子信息工程与钱途",
      "major": "豫剧系",
      "createTime": 1486968841000
    },
    {
      "id": 3,
      "name": "王五",
      "sex": "女",
      "birthday": "1983.12",
      "phoneNum": 15823112222,
      "political": "团员",
      "QQ": 12353456,
      "college": "电子信息工程与钱途",
      "major": "豫剧系",
      "createTime": 1486968841000
    },
    {
      "id": 4,
      "name": "赵六",
      "sex": "女",
      "birthday": "1990.6",
      "phoneNum": 15823112444,
      "political": "普通群众",
      "QQ": 15623456,
      "college": "电子信息工程与钱途",
      "major": "豫剧系",
      "createTime": 1486968841000
    },
    {
      "id": 5,
      "name": "阿毛",
      "sex": "男",
      "birthday": "1991.12",
      "phoneNum": 1582311888,
      "political": "党员",
      "QQ": 123454566,
      "college": "电子信息工程与钱途",
      "major": "豫剧系",
      "createTime": 1486968841000
    },
    {
      "id": 6,
      "name": "大毛",
      "sex": "男",
      "birthday": "1992.9",
      "phoneNum": 15823112545,
      "political": "普通群众",
      "QQ": 124563456,
      "college": "电子信息工程与钱途",
      "major": "豫剧系",
      "createTime": 1486968841000
    },
    {
      "id": 7,
      "name": "二毛",
      "sex": "男",
      "birthday": "1789.12",
      "phoneNum": 15823112565,
      "political": "普通群众",
      "QQ": 124563456,
      "college": "电子信息工程与钱途",
      "major": "豫剧系",
      "createTime": 1486968841000
    },
    {
      "id": 8,
      "name": "三毛",
      "sex": "女",
      "birthday": "1567.12",
      "phoneNum": 15823112655,
      "political": "团员",
      "QQ": 12378456,
      "college": "电子信息工程与钱途",
      "major": "豫剧系",
      "createTime": 1486968841000
    },
    {
      "id": 9,
      "name": "豆豆",
      "sex": "男",
      "birthday": "2000.7",
      "phoneNum": 15823112087,
      "political": "普通群众",
      "QQ": 1768623456,
      "college": "电子信息工程与钱途",
      "major": "豫剧系",
      "createTime": 1486968841000
    },
    {
      "id": 10,
      "name": "小胖",
      "sex": "男",
      "birthday": "2007.4",
      "phoneNum": 15823112345,
      "political": "团员",
      "QQ": 123458976,
      "college": "电子信息工程与钱途",
      "major": "豫剧系",
      "createTime": 1486968841000
    },
    {
      "id": 11,
      "name": "小白",
      "sex": "女",
      "birthday": "2000.2",
      "phoneNum": 15823112345,
      "political": "普通群众",
      "QQ": 1536323456,
      "college": "电子信息工程与钱途",
      "major": "豫剧系",
      "createTime": 1486968841000
    },
    {
      "id": 12,
      "name": "小黑",
      "sex": "男",
      "birthday": "2010.1",
      "phoneNum": 15823112345,
      "political": "普通群众",
      "QQ": 1236575456,
      "college": "电子信息工程与钱途",
      "major": "豫剧系",
      "createTime": 1486968841000
    }
  ],
  "dataTotal": 989
}

我们运用ajax技术加载并处理：

//将数据存放在一个表格中，用字符串的形式拼接
var str = '<table border="1"><theader><th>姓名</th><th>性别</th><th>出生年月</th><th>电话号码</th><th>政治面貌</th><th>QQ</th><th>学院</th><th>系</th><th>创建时间</th></theader><tbody>'
        $.ajax({
            url:'test.json',
            type:'GET',
            dataType:'json',
            data:'',
            success:function (msg) {
                var data = msg.list;
                for(var i =0;i<data.length;i++){
                    str += '<tr>';
                    for(var j in data[i]){
                        if(j != 'id'){
                            str += '<td>'+data[i][j]+'</td>'
                        }
                    }
                    str += '</tr>';
                }
                str += '</tbody></table>';
                $('div').html(str);
            }
        })

 

转载于:https://my.oschina.net/u/3256201/blog/838185