Ajax专栏

ajax笔记


27课

ajax的get和post方法,需要试用回调函数


$(function(){

$('input').click(function(){

$.get('test.php?url=ycku',function(response,status,xhr){

//也可以写成$.get('test.php','url=ycku&a=b',function(response,status,xhr){

$('#box').html(response);

});

});

});

还可以写成

$(function(){

$('input').click(function(){

$.get('test.php',function{

url:'ycku',

},function(response,status,xhr){

$('#box').html(response);

});

});

});



post方法

$(function(){

$('input').click(function(){

$.post('test.php','url=ycku&a=b',function(response,status,xhr){

$('#box').html(response);

});

});

});

还可以写成

$(function(){

$('input').click(function(){

$.post('test.php',function{

url:'ycku',

},function(response,status,xhr){

$('#box').html(response);

});

});

});


//获取json文件

$(function(){

$('input').click(function(){

$.post('test.json',function(response,status,xhr){

$('#box').html(response[0].url);

});

});

});


test.json文件

[

{

"url":"www.ycku.com"

}

]



getJSON专用json方法,安全性更高

$('input').click(function(){

$getJSON('test.json',function(response,status,xhr){

alert(response[0].url);

});

});


getScript当需要时异步加载

$('input').click(function(){

$.getScript('test.js');

});



第28课

最底层的$.ajax方法

只用$.ajax可以解决上诉所有方法

里面都是键值对


$(function(){

$('form input[type=button]').click(function(){

$.ajax({

type:'POST',//传递属性

url:'test.php',//传递文件

data:{//传递数据

url:'ycku',//用来post判断的值

},

success:function(response,status,xhr){//成功返回数据

$('#box').html();

}

});

});

});


//表单提交

$(function(){

$('form input[type=button]').click(function(){

$.ajax({

type:'POST',

url:'test.php',

data:{

user:$('form input[name=user]').val(),

email:$('from input[name=email]').val(),

},

success:function(response,status,xhr){

$('#box').html();

}

});

});

});

为便于复制,也可以写成

$(function(){

$('form input[type=button]').click(function(){

$.ajax({

type:'POST',

url:'test.php',

data:$('from').serialize(),//序列化from所有表单的值

success:function(response,status,xhr){

$('#box').html();

}

});

});

});

index.html

<from>

帐号:<input type="text" name="user"/>

邮箱:<input type="text" name="email"/>

<input type="button" value="提交"/>

</form>


test.php

echo $_POST['user'].' - '.$_POST['email'];


对单选框和复选框的序列化取值

$('form input[name=sex]').click(function(){

$('#box').html(decodeURLComponent($(this).serialize()));

});


以json获取数据

$('form input[name=sex]').click(function(){

var json=$(this).serializeArray();

$('#box').html(json[0].name + '=' + json[0].value);

});




$.ajaxSetup()默认请求初始化重复的属性

$.ajaxSetup({//这里是重复的内容,可公共使用

type:'POST',

url:'user.php',

data:$('form').serialize(),

});

$('form input[type=button]').click(function(){//这里是单个调用

$.ajax({

success:function(response,status,xhr){

$('#box').html(response);

}

});

});



第29课

loading提示


$('from input[type=button]').click(function(){

$.ajax({

type:'POST',

url:'user.php',

data:$('from').serialize(),

success:function(response,status,xhr){

$('#box').html(response);

},

//timeout:500,//表示500毫秒内没有加载成功则退出

//global:false,//表示ajax方法全局取消(loading无效)

error:function(xhr,errorText,errorType){//文件无法加载时

//errorText错误的状态(error),errorType错误的类型(Not Found)

alert('错误!');

},

});

});

$(document).ajaxStart(function(){

$('.loading').show();//加载过程中显示

}).ajaxStop(function(){

$('.loading').hide();//当加载完毕后隐藏

});



post 的error连缀操作

$.post('user.php').error(function(xhr,errorText,errorType){

//alert('找不到文件');

alert(errorText + ':' + errorType);

alert(xhr.status + ':' + errorText);

});



全局报错ajaxError()

$(document).ajaxError(function(event,xhr,settings,errorType){

alert(event.type);//打印出错误类型为ajax

alert(event.target);//打印出dom,(为document)

for(var i in event){//遍历event的所有属性

document.write(i+'<br/>');

}

alert(settings.url);//得到本次错误的URL是哪个(user1.php)

alert(settings.type);//得到本次的提交模式(post)

alert(errorType);//得到错误的类型,如not found

});



//测试全局方法.ajaxSend,.ajaxComplete,.ajaxSuccess,.ajaxError

$('form input[type=button]').click(function(){

$.post('user.php',$('form').serialize());

});


$(document).ajaxSend(function(event,xhr,settings){

alert('发送请求之前');//1

}).ajaxComplete(function(event,xhr,settings){

alert('请求完成后,不管是否失败或成功');//3

}).ajaxSuccess(function(event,xhr,settings){

alert('请求成功后');//2

}).ajaxError(function(event,xhr,settings){

alert('请求失败后');//2

});


//测试局部连缀操作方法.success,.complete,error

$('form input[type=button]').click(function(){

$.post('user.php',$('form').serialize()).success(function(event,xhr,settings){

alert('请求成功后');

}).complete(function(event,xhr,settings){

alert('请求完成后');

}).error(function(event,xhr,settings){

alert('请求失败后');

});

});


ajax属性方法success,complete,error,beforsend

$('from input[type=button]').click(function(){

$.ajax({

type:'POST',

url:'user.php',

data:$('from').serialize(),

success:function(response,status,xhr){

alert('请求成功后');

},

error:function(xhr,errorText,errorType){

alert('请求失败后');

},

complete:function(xhr,errorText,errorType){

alert('请求完成后');

},

beforsend:function(xhr,errorText,errorType){

alert('请求发送前');

},

});

});



第30课


$('form input[type=button]').click(function(){

$.ajax({

type:'POST',

url:'jsonp.php',

dataType:'json',//强制试用json,这样接受php数据时调用json即可

success:function(response,status,xhr){

alert(response.a);//打印出a的结果为1

//console.log(response);//不知道是什么鬼

},

});

});


jsonp.php文件

<?php

$_arr=array('a'=>1,'b'=>,'c'=>3);

$_result=json_encode($_arr);//将数组转化成json格式

?>


json或jsonp跨域获取数据


$.getJSON('http://www.li.cc/jsonp2.php?callback=?',function(){

alert(response.a);

console.log(response);

});

$.ajax({

type:'POST',

url:'http://www.li.cc.jsonp2.php?callback=?',

dataType:'json',

success:function(response,status,xhr){

console.log(response);

alert(response.a);

}

});

或jsonp

$.ajax({

type:'POST',

url:'http://www.li.cc.jsonp2.php?callback=?',

dataType:'jsonp',

success:function(response,status,xhr){

console.log(response);

alert(response.a);

}

});


jqXHR对象,可以将基础代码和后续操作分开,且后续操作可以逐一按序执行

还可以连缀操作

jqXHR.success(function(response,status,xhr){

alert(response + '1');

}).success(function(response,status,xhr){

alert(response + '2');

});


jqXHR.success(function(response,status,xhr){

alert(response + '3');

});

另外有三个新方法done,always,fail可能替代success,complete,error

jqXHR.done(function(response,status,xhr){

alert(response + '1');

}).done(function(response,status,xhr){

alert(response + '2');

});


jqXHR.done(function(response,status,xhr){

alert(response + '3');

});



jqXHR同时处理多个ajax

var jqXHR=$.ajax('t1.php');

var jqXHR2=$.ajax('t2.php');

$.when(jaXHR,jqXHR2).done(function(r1,r2){//r1和r2分别是t1.php和t2.php的数据源

alert(r1[0]);

alert(r2[0]);

});


评论

评论(0)

后面还有条评论,点击查看>>