JQuery下Ajax與PHP數據交換

一、前臺傳遞字符串變量,後臺返回字符串變量(非json格式)

HTML代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<title>Ajax test</title>
</head>
<body>
<input type="text" name="input" id="input"/><br/>
<input type="submit" name="submit" id="submit"/>
</body>
</html>
JQuery代碼:


$(function(){
	$("#submit").click(function(){
		var input=$("#input").val();
		input=escape(input)+"";
		$.ajax({
			type:"POST",
			url:"ajax_test.php",
			data:{"my_input":input},
			error:function(XMLHttpRequest, textStatus, errorThrown){
				alert("false");  
			},
			success:function(data,status){
				alert(unescape(data));
			}
		});
	});
});

PHP代碼:





<?php
header('Content-Type:text/html;charset=utf-8'); 
$output=$_POST['my_input'];
echo $output."+後臺返回";
?>

PS:1、添加JQuery庫的時候個人推薦下載到本地後添加,不建議從網上加載,有可能會因爲網絡問題而出現"304 not modified"的錯誤
     2、使用JQuery時,HTML不要用<form>標籤,否則即使AJAX發送請求成功後,也返回不了數據。
     3、要先引用JQuery庫,後引入js文件,否則沒有反應
     4、如果想從後臺放回中文字符,php中要加上
header('ContentType:text/html;charset=utf-8'); (gb2312不行,貌似jquery接受的都是utf8編碼的字符)

二、前臺傳遞多個一維數組,後臺返回字符串變量(非json格式)

  Javascript代碼:

  在非json格式下,後臺只能返回字符串,如果想後臺返回數組,可以採用json格式,在本文的後面會詳細介紹。

$(function(){
     var my_data=new Array();
     var my_data1=new Array();
     my_data[0]=0;
     my_data[1]=1;
     my_data[2]=2;
     
     my_data1[0]=10;
     my_data1[1]=11;
     my_data1[2]=12;
     
     $.ajax({
         url: "ajax_php.php",  
         type: "POST",
         data:{trans_data:my_data,trans_data1:my_data1},
         //dataType: "json",
         error: function(){  
             alert('Error loading XML document');  
         },  
         success: function(data,status){//如果調用php成功    
             alert(data);
         }
     });
     
 });

  PHP代碼:

<?php
      header('Content-Type:text/html; charset=utf-8');//使用gb2312編碼,使中文不會變成亂碼

      //讀取第一個數組
      $backValue="trans_data:";
      $trans=$_POST['trans_data'];
      foreach($trans as $value)
      {
          $backValue=$backValue." ".$value;
     }
     
     //讀取第二個數組
     $backValue=$backValue." , trans_data1:";
     $trans=$_POST['trans_data1'];
     foreach($trans as $value)
     {
         $backValue=$backValue." ".$value;
     }
     echo $backValue;
 ?>

顯示效果如下圖:

\

三、前臺傳遞多個一維數組,後臺返回二維數組(json格式)

  Javascript代碼:

$(function(){
     var my_data=new Array();
     var my_data1=new Array();
     my_data[0]=0;
     my_data[1]=1;
     my_data[2]=2;
      
     my_data1[0]=10;
     my_data1[1]=11;
     my_data1[2]=12;
     
     $.ajax({
         url: "ajax_php.php",  
         type: "POST",
         data:{trans_data:my_data,trans_data1:my_data1},
         dataType: "json",
         error: function(){  
             alert('Error loading XML document');  
         },  
         success: function(data){//如果調用php成功            
             var back="";
             for(var i=0;i<(data.length);i++){
                 for(var j=0;j<data[0].length;j++){
                     back+=" "+i+" 行 "+j+" 列 :"+data[i][j]+" ";
                 }
                 back+="\n";
             }
             alert(back);
         }
     });
 });

  PHP代碼:

 <?php
     header('Content-Type:text/html; charset=gb2312');//使用gb2312編碼,使中文不會變成亂碼    
     $backValue=array();
     $backValue[0]=$_POST['trans_data'];    
     $backValue[1]=$_POST['trans_data1'];
     
     echo json_encode($backValue);
 ?>

四、前臺傳遞一維數組和二維數組,後臺返回二維數組(json格式)

  Javascript代碼:

$(function(){
     var my_data=new Array();
     var my_data1=new Array();
     var my_data2=new Array();
      
     my_data[0]=0;
     my_data[1]=1;
     my_data[2]=2;
     
     my_data1[0]=10;
     my_data1[1]=11;
     my_data1[2]=12;
     
     my_data2[0]=my_data;
     my_data2[1]=my_data1;
     
     $.ajax({
         url: "ajax_php.php",  
         type: "POST",
         data:{trans_data:my_data,trans_data1:my_data1,trans_data2:my_data2},
         dataType: "json",
         error: function(){  
             alert('Error loading XML document');  
         },  
         success: function(data){//如果調用php成功            
             var back="";
             for(var i=0;i<(data.length);i++){
                 for(var j=0;j<data[0].length;j++){
                     back+=" "+i+" 行 "+j+" 列 :"+data[i][j]+" ";
                 }
                 back+="\n";
             }
             alert(back);
         }
     });
    
 });

  PHP代碼:

?php
     header('Content-Type:text/html; charset=gb2312');//使用gb2312編碼,使中文不會變成亂碼    
     $backValue=array();
     $backValue=$_POST['trans_data2'];    
     $backValue[2]=$_POST['trans_data'];    
     $backValue[3]=$_POST['trans_data1'];
     
     echo json_encode($backValue);
 ?>

顯示效果如下圖:

\

 

資料轉載於:http://www.php100.com/html/webkaifa/PHP/PHPyingyong/2013/0122/11971.html







發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章