先写html页面(test.html)：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf8"> 5 <title>ajax</title> 6 <script type="text/javascript" src='http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js'></script> 7 </head> 8 <body> 9 <div id="test">test之前的文字</div> 10 <button id='button'>我变！</button> 11 <script type="text/javascript"> 12 $(document).ready(function(){ 13 var sta=0; 14 $("#button").click(function(){ 15 sta==0?(function(){ 16 sta=1;//ajax参数的意思分别是请求的地址，发送请求的类型，发送数据，发送数据的类型（这里最好用双引号将字符串引起来），成功后的回调函数 17 $.ajax({url:"test.php",type:"post",data:{"status":0},dataType:"json",success:function(data){ 18 $("#test").html(data.t1); 19 }})})():(function(){ 20 sta=0; 21 $.ajax({url:"test.php",type:"post",data:{"status":1},dataType:"json",success:function(data){ 22 $("#test").html(data.t2); 23 }})})(); 24 }); 25 }); 26 </script> 27 </body> 28 </html>
然后见一个同文件夹下的test.php文件
1 <?php 2 header("Content-type:text/html;charset=utf-8"); 3 $status=$_POST['status']; 4 if(0==$status){ 5 //下面要注意和上面的datatype一致，这里使用json 6 //不然可能出现即使成功了也不会调用succes回调函数 7 $info = array("t1"=>"之后的文字"); 8 $userinfo = json_encode($info); 9 echo $userinfo; 10 }else{ 11 $info = array("t2"=>"之前的文字"); 12 $userinfo = json_encode($info); 13 echo $userinfo; 14 } 15 ?>
这里的话就没有写css了 只是简单的实现一下功能和说明一下常常遇到的问题而已，如果你有兴趣的话，可以尝试写个漂亮的界面。
下面用其他的ajax的其他方法写一下 post方法（test.html）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf8"> 5 <title>ajax</title> 6 <script type="text/javascript" src='http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js'></script> 7 </head> 8 <body> 9 <div id="test">test之前的文字</div> 10 <button id='button'>我变！</button> 11 <script type="text/javascript"> 12 $(document).ready(function(){ 13 var sta=0; 14 $("#button").click(function(){ 15 sta==0?(function(){ 16 sta=1; 17 $.post("test.php",{"status":0},function(data){ 18 $("#test").html(data.t1); 19 },"json")})():(function(){ 20 sta=0; 21 $.post("test.php",{"status":1},function(data){ 22 $("#test").html(data.t2); 23 },"json")})(); 24 }); 25 }); 26 </script> 27 </body> 28 </html>
服务器端还是一样(test.php)：
1 <?php 2 header("Content-type:text/html;charset=utf-8"); 3 $status=$_POST['status']; 4 if(0==$status){ 5 //下面要注意和上面的datatype一致，这里使用json 6 //不然可能出现即使成功了也不会调用succes回调函数 7 $info = array("t1"=>"之后的文字"); 8 $userinfo = json_encode($info); 9 echo $userinfo; 10 }else{ 11 $info = array("t2"=>"之前的文字"); 12 $userinfo = json_encode($info); 13 echo $userinfo; 14 } 15 ?>
用get方法实现一下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf8"> 5 <title>ajax</title> 6 <script type="text/javascript" src='http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js'></script> 7 </head> 8 <body> 9 <div id="test">test之前的文字</div> 10 <button id='button'>我变！</button> 11 <script type="text/javascript"> 12 $(document).ready(function(){ 13 var sta=0; 14 $("#button").click(function(){ 15 sta==0?(function(){ 16 sta=1; 17 $.get("test.php",{"status":0},function(data){ 18 $("#test").html(data.t1); 19 },"json")})():(function(){ 20 sta=0; 21 $.get("test.php",{"status":1},function(data){ 22 $("#test").html(data.t2); 23 },"json")})(); 24 }); 25 }); 26 </script> 27 </body> 28 </html>
test.php:
1 <?php 2 header("Content-type:text/html;charset=utf-8"); 3 $status=$_GET['status'];//这里是$_GET 4 if(0==$status){ 5 //下面要注意和上面的datatype一致，这里使用json 6 //不然可能出现即使成功了也不会调用succes回调函数 7 $info = array("t1"=>"之后的文字"); 8 $userinfo = json_encode($info); 9 echo $userinfo; 10 }else{ 11 $info = array("t2"=>"之前的文字"); 12 $userinfo = json_encode($info); 13 echo $userinfo; 14 } 15 ?>
好了，如果感兴趣，可以通过多练几遍就熟了。很简单的一个demo例子。