先寫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例子。