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:
<?php
if($_POST['url']=='baidu')
echo "ajax request";
?>
表单序列化
html
<form>
用户名:<input type="text" name="user" />
<input type="ardio" name="sex" value="男">男
<input type="ardio" name="sex" value="女">女
<input type="button" value="提交" />
</form>
<div id="box"></div>
test.php:
<?php
echo $_POST['user'];
?>
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技术。
