index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 5 <title>phpAjax</title> 6 <script type="text/javascript" src="js/jquery.js"></script> 7 </head> 8 <body> 9 <label for="title">图书: </label> 10 <input type="text" name="title" id="title"><br/> 11 <label for="author">作者: </label> 12 <input type="text" name="author" id="author"><br/> 13 <input type="button" value="send" id="btn"><br/> 14 <span id="msg"></span> 15 </body> 16 <script type="text/javascript"> 17 $(function(){ 18 19 $("#btn").click(function(event) { 20 var text = $("input").serialize(); 21 $("#msg").html(""); 22 $.ajax({ 23 type:"post", 24 url:"test.php", 25 dataType:"json", 26 data:text, 27 success:function(data){ 28 $("#msg").html("图书: "+data.title+"<br/>作者: "+data.author+"<br/>"+data.msg); 29 } 30 }); 31 $("#title").prop(‘value‘, ‘‘); 32 $("#author").prop(‘value‘, ‘‘); 33 }); 34 }); 35 </script> 36 </html>
test.php
1 <?php 2 $title = $_POST["title"]; 3 $author = $_POST["author"]; 4 5 $arr = array( 6 "title"=>$title, 7 "author"=>$author, 8 "msg"=>"恭喜您购得此书!!!" 9 ); 10 11 if($title== "php" && $author == "phpauthor"){ 12 echo json_encode($arr); 13 } 14 ?>
原文：http://www.cnblogs.com/yuge790615/p/4870551.html