jQuery>ajax方法API

ajax在jq中封装的函数，AIP。

1.请求加载，错误处理，全局调用方法：

$(doucument) 
    //加载过程中函数
    .ajaxStart(function(){
        $('.loading').show();
    })
    //加载完成后函数
    .ajaxStop(function(){
        $('.loading').hide();
    })
    .ajaxSend(function(){
        alert('发送请求之前执行');
    })
    .ajaxComplete(function(){
        alert('请求完成之后，不论失败还是成功');
    })
    .ajaxSuccess(function(){
        alert('请求成功调用');
    })

2.请求加载，错误处理，局部调用方法：

$.post("test.php")
    .success(function(){
      alert('请求成功调用');
    })
    .complete(function(){
      alert('请求完成之后，不论失败还是成功');
    })
    .error(function(){
      alert('请求失败调用');
    })

3.load()用法：

load(url,data,callback)方法。
url：链接的文件。
data：传进去的参数。
callback：回调数据。

$("#div").load("text.html"); //在div下渲染text.html内容。
$("#div").load("text.html .url"); //实现过滤效果，只显示类为url的内容。
$("#div").load("text.php?user=zhangsan&pw=123") //get方法传参数。
//post方法传参：
$("#div").load("text.php",{
  url:"baidu"  //data 方法。
},function(response,stutas,xht){
  //response 回调的数据。
  $("#div").html(response + 123456）;
  //stutas 判断请求成功或是失败了。
  alert(stutas)//返回值为success.error。
  //xht 是对象的调用方法。
  alert(xht.reponseText)//回调的数据，等同response
  alert(xht.stutas) //请求返回时服务器状态码：200,404
  alert(xht.statusText)//请求返回字符串：OK 或 NO
})

3.post与get的用法，与区别：
get(url,data,callback,type);
post(url,data,callback,type);

//get 用法：
$.get('test.php?url=baidu',function(response,status,xhr){
    $("#box").html(response);
})
$.get('test.php','url=baidu',function(response,status,xhr){
    $("#box").html(response);
})
$.get('test.php',{url='baidu'},function(response,status,xhr){
    $("#box").html(response);
})
//post 用法：
$.post('test.php',{url='baidu'},function(response,status,xhr){
    $("#box").html(response);
})
//字符串方式也可以，但不推荐使用
$.post('test.php','url=baidu',function(response,status,xhr){
    $("#box").html(response);
})
$.post('test.xml',function(response,status,xhr){
    alert($(response).find('root').find('url').text())
},'xml') //type参数为xml.

$.post('test.json',function(response,status,xhr){
    alert(response[0].url);
},'json') //type参数为json.

$getJSOM('test.json',function(response,status,xhr){
    alert(response[0].url);
}) //直接转换json,没有type参数。

$getScript("test.js"); //动态加载js文件。安需求加载js，增加性能。

5.ajax技术
ajax({key:value})方法
表单序列化

jQuery的ajax模版:

$(function(){
  $('input').click(function(){
    $.ajax({
      type:"post",
      url:"test.php",
      data:{
        url:"baidu"
      },
      success:function(response){
        $("#box").html(response);
      }
    });
  })
})

test.php:

表单序列化
html

  用户名:
  男
  女
  

test.php:

demo.js:

$(function(){
  $('form input[type=button]').click(function(){
    $.ajax({
      type:"post",
      url:"test.php",
      data:{
        user:$('form input[name=user]').val
      },
      success:function(response){
        $("#box").html(response);
      }
    });
  })
})

表单序列化：serialize()

$(function(){
  $('form input[type=button]').click(function(){
    $.ajax({
      type:"post",
      url:"test.php",
      data:$('form').serialize(),  //表单中所以值一次性存进去。
      success:function(response){
        $("#box").html(response);
      }
    });
  })
})

获取单选框属性，值：

$('form input[name=sex]').click(function(){
  //$('#box').html($(this).serialize()); //有编码功能；
  //decodeURIComponent()将编码进行转换
  $('#box').html(decodeURIComponent($(this).serialize()))
})

用json的方式：

$('form input[name=sex]').click(function(){
  var json = $(this).serializeArray(); 
  $('#box').html(json[0].name + ':' + json[0].value);
})

更好解析的处理多数据的表单。有param()转换：

$(function(){
  $('form input[type=button]').click(function(){
    $.ajax({
      type:"post",
      url:"test.php",
      data:$.param({
        user:$('form input[name=user]').val
      }),
      success:function(response){
        $("#box").html(response);
      }
    });
  })
})

表单序列化还需要深入了解。谢谢支持。

基础ajax技术。