先写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例子。
时间： 2024-10-20 03:40:36