PHP Ajax简单实例

最近学习Jquery Ajax部分，通过简单例子,比较了下post，get方法的不同

HTML部分

 1 <html>  
 2 <head>  
 3 <title>jQuery Ajax 实例演示</title>  
 4 </head>  
 5 <script language="javascript" src="jquery.min.js"></script>  
 6 <script language="javascript"><!--  
 7 $(document).ready(function ()  
 8 {  
 9    $('#send_ajax').click(function (){  
10      var params=$('input').serialize(); //序列化表单的值  
11      $.ajax({  
12        url:'ajax_json.php', //后台处理程序  
13        type:'post',         //数据发送方式  
14        dataType:'json',     //接受数据格式  
15        data:params,         //要传递的数据  
16        success:update_page //回传函数(这里是函数名)  
17      });  
18    });  
19 //$.post()方式：  
20 $('#test_post').click(function (){  
21     $.post(  
22       'ajax_json.php',  
23       {  
24         username:$('#input1').val(),  
25         age:$('#input2').val(),  
26         sex:$('#input3').val(),  
27         job:$('#input4').val()  
28       },  
29       function (data) //回传函数  
30       {  
31         var myjson='';  
32         eval('myjson=' + data + ';');  
33         $('#result').html("姓名:"+myjson.username+"<br />年龄:"+myjson.age+"<br />性别:"+myjson.sex+"<br />工作:"+myjson.job+"<br />post方法");  
34       }  
35     );  
36    });  
37 //$.get()方式：  
38 $('#test_get').click(function (){  
39     $.get(  
40         'ajax_json.php',  
41         {  
42             username:$("#input1").val(),  
43             age:$("#input2").val(),  
44             sex:$("#input3").val(),  
45             job:$("#input4").val()  
46         },  
47         function(data) //回传函数  
48         {  
49             var myjson='';  
50             eval("myjson=" + data + ";");  
51             $("#result").html("姓名:"+myjson.username+"<br />年龄:"+myjson.age+"<br />性别:"+myjson.sex+"<br />工作:"+myjson.job+"<br />get方法");  
52         }  
53     );  
54 });  
55 });  
56 //回传函数实体，参数为XMLhttpRequest.responseText  
57 function update_page (json) {  
58     var str="姓名:"+json.username+"<br />";  
59     str+="年龄:"+json.age+"<br />";  
60     str+="性别:"+json.sex+"<br />";  
61     str+="工作:"+json.job+"<br />";  
62     str+="追加测试:"+json.append;  
63     $("#result").html(str);  
64 }  
65 // --></script>  
66 <body>  
67 <div id="result" style="background:orange;border:1px solid red;width:300px;height:200px;"></div>  
68 <form id="formtest" action="" method="post">  
69     <p><span>输入姓名:</span><input type="text" name="username" id="input1" /></p>  
70     <p><span>输入年龄:</span><input type="text" name="age" id="input2" /></p>  
71     <p><span>输入性别:</span><input type="text" name="sex" id="input3" /></p>  
72     <p><span>输入工作:</span><input type="text" name="job" id="input4" /></p>  
73 </form>  
74 <button id="send_ajax">提交</button>  
75 <button id="test_post">POST提交</button>  
76 <button id="test_get">GET提交</button>  
77 </body>  
78 </html>
View Code

PHP部分

 1 <?php  
 2 //$arr = $_POST; //若以$.get()方式发送数据，则要改成$_GET.或者干脆:$_REQUEST  
 3 $arr = $_REQUEST;  
 4 $arr['append'] = '测试字符串';  
 5 //print_r($arr);  
 6 $myjson = my_json_encode($arr);  
 7 echo $myjson;  
 8 function my_json_encode($phparr){  
 9     if(function_exists("json_encode")){  
10         return json_encode($phparr);  
11     }else{  
12         require_once 'json/json.class.php';  
13         $json = new Services_JSON;  
14         return $json->encode($phparr);  
15     }  
16 }  
17 ?>

 

posted @ 2013-12-15 11:05  Otgs  阅读(443)  评论(0)    收藏  举报