技术博客

jQuery基础--Ajax

1.使用load()方法异步请求数据

使用load()方法通过Ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中：

1
load(url,[data],[callback])

url:加载服务器地址
data：请求时发送的数据
callback：数据请求成功后，执行的回调函数

1
2
3
4
5
6
7
8
9
10
11
$(function(){
  $('#btnShow').bind('click',function(){
    var $this = $(this);
    $('.content')
    .html("<img src='Images/Loading.gif' alt='; />")
    .load("Data/fruit.html", function(){
      $this.attr("disabled","true");
    });
  });
});
// 点击加载按钮，向服务器请求加载一个指定页面的内容，加载成功后，将数据内容显示在.content容器中，并将加载按钮设为不可用。

2.使用getJSON()方法异步加载JSON格式数据

使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数组，并对获取的数据进行解析，显示在页面中

1
$.getJSON(url,[data],[callback])

1
2
3
4
5
6
7
8
9
10
11
12
$(function(){
  $('#btnShow').bind('click',function(){0
    var $this = $(this);
    $.getJSON("Data/sport.json", function(data){
      $this.attr('disabled','true');
      $.each(data, function(index,sport){
        if(index === 3)
        $('ul').append('<li>' + sport['name'] + '</li>');
      });
    });
  });
});

3.使用getScript()方法异步加载并执行js文件

使用getScript()方法异步请求并执行服务器中的JS格式的文件

1
$.getScript(url,[callback])

1
2
3
4
5
6
$('#btnShow').bind('click',function(){
  var $this = $(this);
  $.getScript('Data/sport.js', function(){
    $this.attr('disabled','true');
  });
});

4.使用get()方法以GET方式从服务器获取数据

1
$.get(url, [callback]);
1
2
3
4
5
6
7
8
$('#btnShow').bind('click',function(){
  var $this = $(this);
  $.get("http://www.yizihan.github.io/data/info_f.php", function(data){
    $this.attr("disabled","true");
    $("ul").append("<li>我的名字叫：" + data.name + "</li>");
    $("ul").append("<li>男朋友对我说：" + data.say + "</li>");
  }, "json");
});

5.使用post()方法以POST方式从服务器发送数据

1
$.post(url, [data], [callback])
1
2
3
4
5
6
7
8
$("#btnCheck").bind("click",function(){
  $.post("http://www.imooc.com/data/check_f.php",{
    num:$("#txtNumber").val()       // 将本地的值提交到服务器
  },
  function(data){                   // 得出验证结果
    $("ul").append("<li>你输入的<b>" + $("#txtNumber").val() + "</b>是<b>" + data + "</b></li>");
  });
});

6.使用serialize()方法序列化表单元素值

使用serialize()方法可以就爱那个表单中有name属性的元素进行序列化，生成标准URL编码文本字符串，直接可用于ajax请求

1
$(seletor).serialize();

1
2
3
4
5
6
$('#btnAction').bind("click",function(){
  $("#litest").html($("form").serialize());
});
// $('form').serialize()这种表单序列化的方式，本质是将表单中的元素值自动处理成标准URL编码字符，这样在传输数据时，不用一个个值去拼接，这种方式更加快捷，正确性高，利于表单中有大量提交元素字段时使用。
// 可以运用下面这这样的代码
$.post(url, $('form').serialize(), [callback]);

7.使用ajax()方法加载服务器数据

ajax()是最底层，功能最强大的请求服务器数据的方法，它不仅可以获取服务器返回的数据，还能向服务器发送请求并传递数值

1
$.ajax([settings]);

1
2
3
4
5
6
7
8
9
10
11
12
13
$("#btnShow").bind("click",function(){
  var $this = $(this);
  $.ajax({
    url: "Data/article.txt",    // 服务器请求路径
    data: {num:$("#txtNumber").val()},  // 请求传递的数据
    dataType: "text",           // 服务器返回的数据类型
    type: "post",               // 发送数据请求的方式，默认get
    success: function(data){    // 请求成功后的回调函数
      $this.attr("disable", "true");
      $("ul").append(data);
    }
  });
});

8.使用ajaxSetup()方法设置全局Ajax默认选项

使用ajaxSetup()方法可以设置Ajax请求的一些全局选项值，设置成功后，后面的Ajax请求将不需要再添加这些选项值

1
2
$.ajaxSetup([options])
// options参数为一个对象，通过该对象设置Ajax请求时的全局选项值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function(){
  $.ajaxSetup({
    dataType: "text",
    success:function(data){
      $("ul").empty().append(data);
    }
  });
  $("#btnShow_1").bind("click",function(){
    $.ajax({url: "Data/article_1.txt"});
  });
  $("#btnShow_2").bind("click",function(){
    $.ajax({url: "Data/article_2.txt"});
  });
});
// 先调用ajaxSetup()方法设置全局的Ajax选项值，再点击两个按钮，分别使用ajax()方法请求不同的服务器数据，并将数据内容显示在下面

9.使用ajaxStart()和ajaxStop()方法

两个方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数，ajaxStop()方法用于在Ajax请求完成后触发函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$("#divload").ajaxStart(function(){$(this).show();});
$("#divload").ajaxStop(function(){$(this).hide()});
$("#btnShow").bind("click",function(){
  var $this = $(this);
  $.ajax({
    url: "Data/info.php",
    dataType: "json",
    success: function(data){
      $this.attr("disabled","true");
      $("ul").append("<li>我的名字叫：" + data.name + "</li>");
      $("ul").append("<li> 常常有人跟我说：" + data.say + "</li>");
    }
  });
});