Ajax学习（一）

知识点：.load()方法，$.get(),$.post(),$.ajax()方法的使用

一、Ajax访问页面方式

1，load局部方法（需要一个包含元素的JQuery对象作为前缀）

.load()方法有三个参数：url（必须，请求的地址），data(可选，发送的key/value数据)、callback(可选，成功或者失败回调函数)。$('input').click(function () {    $('#box').load('test.php',      {      url : 'ycku'      }, function (response, status, xhr) {          alert('返回的值为:' + response + '，状态为:' +       status + '，状态是:' + xhr.statusText);    }); });

2，get全局方法（无需指定元素）

（1）第一种方式 $("input").click(function () {//get第一种传参方式        $.get("test1.html?username=zhangsan",        function(response,statues,xml){            $("#table").html(response);        })    });（2）第二种方式    $("input").click(function () {//get第二种方式传递参数        $.get("test1.html","username=zhangsan",function(response,status,xl){            $("#table").html(response);        })    });（3）第三种方式    $("input").click(function () {//get第3种方式传递参数        $.get("test1.html",{            username:"zhangsan",            age:20        },function(response,status,xl){            $("#table").html(response);        })

3，Post全局方法（无需指定元素）

第一种方式：    $("input").click(function () {        $.post("test1.html",        "username=zhangsan","age=lisi",        function(response,status,xml){            $("#table").html(response);        });    });第二种方式：    $("input").click(function () {        $.post("test1.html",        {            username:"zhangsan",            age:"20"        },        function(response,status,xml){            $("#table").html(response);        });    });

二、$.ajax()

$.ajax()是所有ajax方法中最底层的方法，所有其他的方法都是基于$.ajax()方法的封装，这个方法只有一个参数，传递各个键值对的对象。

1，$.ajax()的使用

$("input").click(function(){       $.ajax({         type:"GET",           url:"test1.html",           data: {               name: "zhangsan",               age: "40"           },           success:function(response,status,xhl){            $("#table").html(response);           }       })   });注意：对于data属性，如果是GET模式，可以使用之前的三种请求方式；如果是Post模式可以使用之前的2中方式。

2，表单序列化

（1）AJax常规形式提交表单

$("form input[name=button]").click(function(){     $.ajax({       type:"Post",         url:"test1.html",         data:{          user:$("input[name=user]").val(),             email:$("input[name=email]").val()         },         success:function(response,status,xhl){          $("#table").html(response);         }     })  });

（2）Ajax使用表单序列化方法.Serialize()，智能获取表单所有数据。

$("form input[name=button]").click(function(){      $.ajax({        type:"get",          url:"test1.html",          data:$("form").serialize(),          success:function(respons,status,xhl){             $("#table").html(respons);          }      })    });

(3).SerializeArray()方法直接把数据整合成键值对json对象。

 $("input[type=radio]").click(function(){   var json=$("input").serializeArray();   alert(json[2].value);});

（4）decodeURI($(“form”).serialize())；解决get请求乱码

（5）console.log($(“form”).serializeArray()); 控制台输出

（6）$.param()将对象形式的键值对转为URL地址的字符串。

$("form input[name=button]").click(function(){        $.ajax({            type:"Post",            url:"test1.html",            data:$.param({                    user:$("input[name=user]").val(),                emial:$("input[name=email]").val()            }),            success:function(response,status,xhl){                $("#table").html(response);            }        })    })