jquery异步获取数据

发表于 | 分类于 ， | 次

jquery异步获取数据

jquery异步获取数据

  • 使用load()方法异步请求数据
    使用load()方法通过ajax请求加载服务器的数据，并把返回的数据放置到指定的元素中。load(url,[data],[callback])，参数URL为加载服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后执行的回调函数。
1
2
3
4
5
6
7
8
9
$(function(){
    $('#btn').on('click',function(){
        var this = $(this);
        $('.content').html('<img src='loading.gif'/>')
                     .load('fruit.html',function(){
                        $this.attr('disabled',true);
                      });
    });
});
  • 使用getJSON()方法异步加载json格式数据
    使用getJSON()方法可以通过ajax异步请求的方式获取服务器中的数据，并对获取到的数据进行解析，显示在页面中。$.getJSON(url,[data],[callback])，其中，URL参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。
1
2
3
4
5
6
7
8
9
$('#btn').on('click',function(){
    var this = $(this);
    $.getJSON('sport.json',function(data){
        this.attr('disabled',true);
        $.each(data,function(index,sport){
            $('ul').append(`<li>sport["name"]</li>`);
        });
    });    
})
  • 使用getScript()方法异步加载并执行js文件，$.getScript(url,[callback])
  • 使用get()方法以GET方式从服务器获取数据，通过方法中中的回调函数的参数返回请求的数据。
1
2
3
4
5
6
7
8
$('#btn').on('click',function(){
    var this = $(this);
    $.get('info.php',function(data){
        this.attr('disabled',false);
        $('ul').append(data.name);
        $('ul').append(data.say);
    });
});
  • 使用post方法以post方式向服务器发送数据
    post()方法多用于以post方式向服务器发送数据，服务器接受到数据后，进行处理，并将处理结果返回给页面，$.post(url,[data],[callback])，参数URL为加载服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后执行的回调函数。
1
2
3
4
5
6
7
8
9
10
$(function(){
    $('#btn').on('click',function(){
        $.post('check.php',{
            num: $('#number').val()    
        },
        function(data){
            $('ul').append(`<li>你输入的${$('#number'),val()}是<b>${data}</b></li>`);
        });
    });
});

后台代码如下：

1
2
3
4
5
6
$num = $_POST['num'];
if($num%2==0){
    echo '偶数';
}else{
    echo '奇数';
}

  • 使用serialize()方法序列化表单元素值
    使用serialize()方法可以将表单中有name属性的元素值进行序列化，生成标准的URL编码文本字符串，直接用于ajax请求，调用格式如下：$(selector).serialize()

  • 使用ajax方法加载服务器数据
    ajax方法是最底层，功能最强大的请求服务器数据的方式，它不仅仅可以获取服务器返回的数据，还可以向服务器发送并传递数值。$.ajas([settings])，其中参数setting为发送ajax请求时的配置对象，在该对像中，dada为请求时传递的数据，dataType为服务器返回的数据类型，success为请求成功时的回调函数，type为发送数据请求的方式，默认为get。

1
2
3
4
5
6
7
8
9
10
11
12
13
$(function(){
    $('#btn').on('click',function(){
        var this = $(this);
        $.ajax({
            url: 'article.php',
            dataType: 'text',
            success: function(data){
                this.attr('disabled',false);
                $('ul').append(data);
            }    
        });    
    });
});
  • 使用ajaxSetup方法设置全局ajax默认选项
    使用ajaxSetup()方法可以设置，ajax请求的一些全局变量，设置完成后，后面的ajax请求不需要添加这些选项值。$.ajaxSetup([options])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(function(){
    $.ajaxSetup({
        dataType: 'text',
        success: function(data){
            $('ul').empty().append(data);
        }    
    });
});
$('#btn1').on('click',function(){
    $.ajax({
        url: 'a1.txt'    
    });
}); 
$('#btn2').on('click',function(){
    $.ajax({
        url: 'a2.txt'    
    });
});
  • 使用ajaxStart()和ajaxStop()方法
    两者绑定ajax时间。ajaxStart()方法用于在ajax请求发出前触发函数，ajaxStop()方法在ajax请求完成后触发函数。