ajax02.html
客户端
<!DOCTYPE html> <!--课件_52.第九章:Ajax技术[7]-$.ajax方法.rar,很常用--> <html id="html"> <head> <Meta charset="utf-8" /> <title>demo</title> <script type="text/javascript" src="jquery-2.1.4.min.js"></script> <style type="text/css"> </style> <script type="text/javascript"> $(function(){ $('button').click(function(){ /* $.ajax('return.PHP',{ success:function(data,textStatus,jqXHR){ console.log(':))'); console.log(data); } }); */ $.ajax({ url:'http://localhost/MyTestAjax08/return.PHP',//请求的URL地址 type:'get',//设置请求的http方式,method也可以 dataType:'json',//将服务器端返回的数据直接认定为是这个格式,然后会做一些自动的处理(如果是json字符串,会自动转化为js对象),服务器返回的默认格式是text/html格式 data:{//向服务器端发送的数据 name:'孙胜利',sex:true },success:function(data,jqXHR){//请求成功之后执行的回调函数 //console.log(':))'); console.log(data); //console.log(this); },error:function(jqXHR,errorThrown){//请求失败之后执行的回调函数 console.log(errorThrown); } // beforeSend:function(jqXHR,settings){//在请求正式发起之前执行的回调函数,我们可以利用它在请求的配置对象进行一些修改! // //settings.url='test/a.PHP'; // //console.log('请求之前执行的我!'); // //return false;//取消本次请求 // },// complete:function(jqXHR,textStatus){//请求完成之后执行的回调函数(无论成功还是失败) // console.log('请求完成了!'); // },//context:$('#div1'),//设置回调函数内this的值 //timeout:2000,//为本次Ajax请求设置一个超时时间! //async:false,//是否以异步请求发出 //cache:false,//不缓存 /* dataFilter:function(data,type){//设置讲服务器端返回的原生的数据进行处理的回调函数(注意:一定要将处理完的数据return) return data.toUpperCase(); },*/ /* converters:{//控制返回数据的格式转换方式! "text json":function(data){ return data; },"text html":function(data){ return $(data); } },*/ //global:false//设置是否触发全局的Ajax回调函数! }); }); }); </script> </head> <body> <button>开始</button> <div id="div1"> div1 </div> </body> </html>
return.PHP
服务器端
<?PHP sleep(1); //$html=<<<A //<ul class="ul0"> // <li>哈哈!</li> // <li>哈哈!</li> // <li>哈哈!</li> // <li>哈哈!</li> // <li>哈哈!</li> //</ul> //<ul class="ul1"> // <li>哈哈!</li> // <li>哈哈!</li> // <li>哈哈!</li> // <li>哈哈!</li> // <li>哈哈!</li> //</ul> //A; $json=<<<A {"name":"孙胜利"} A; echo $json; //echo 'hello world'; ?>