有捨才有得: [php][javascript]以ajax傳送json物件,還原陣列(物件)並執行

將javascript陣列轉換成json物件，以ajax傳送到PHP，再由PHP解析javascript陣列並且顯示出來

需要三個檔案:
ajax_index.php(主頁)
ajax_example.js(ajax的javascript檔)
ajax_example.php(ajax的PHP檔)

ajax_index.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8;"/>
<title></title>
<!-- 引入 jQuery(非必要,去掉時有些寫法要改為javascript) -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<!-- 引入AJAX(必要) -->
<script type="text/javascript" src="ajax_example.js"></script> 
<script type="text/javascript">
var car=new Array('toyota','BenZ','mazada');
var json = JSON.stringify(car);
test_ajax(json); //執行AJAX
</script>
</head>
<body>
<h1>以ajax傳送json物件</h1>
<div>javascript陣列:var car=new Array('toyota','BenZ','mazada');</div>
<script type="text/javascript">
var car=new Array('toyota','BenZ','mazada');
var json = JSON.stringify(car);
document.write('轉成json物件:'+json);
test_ajax(json); //執行AJAX
</script>
<div id="show_area"></div>
</body>
</html>

先將car陣列轉為json物件再執行test_ajax(json);

ajax_example.js

var http_request=false;
function test_ajax(json){
 http_request=false;
 if(window.XMLHttpRequest){
  http_request=new XMLHttpRequest();
  if(http_request.overrideMimeType){
   http_request.overrideMimeType('text/xml');
  }
 }else if(window.ActiveXObject){
  try{ //6.0+
   http_request=new ActiveXObject("Msxml2.XMLHTTP");
  }catch(e){
   try{ //5.5+
    http_request=new ActiveXObject("Microsoft.XMLHTTP");
   }catch (e){}
  }
 }
 if(!http_request){
  alert('Giving up :( Cannot create a XMLHTTP instance');
  return false;
 }
 http_request.onreadystatechange=show_area;
 http_request.open('POST','ajax_example.php',true);
 http_request.setRequestHeader("Content-Type","application/json; charset=utf-8");
 http_request.send(json);
}

function show_area(){
 if(http_request.readyState==4){
  if(http_request.status==200){
   $('#show_area').append(http_request.responseText);  //將結果顯示出來
  }
 }
}

將收到的值以json方式寄出,特別要注意的是 ↓ 要記得改為:
http_request.setRequestHeader("Content-Type","application/json; charset=utf-8");

其實 ↓ 改成它也是能跑的,~~甚至刪除也還是可以跑(why?)~~
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");

以下是查詢上面兩種方式的差異如下: (未實際測試過,這是引用網路上的資料)

The first case is telling the web server that you are posting JSON data as in:

{ Name : 'John Smith', Age: 23}

The second option is telling the web server that you will be encoding the parameters in the URL as in:

Name=John+Smith&Age=23

引用自這裡

ajax_example.php

<? 
$value = json_decode(file_get_contents('php://input'));//取得JSON傳輸的值 並且解析
echo '收到javascript傳來的json物件，還原陣列並且顯示:</br>';
foreach($value as $key=>$val){
 echo $key.'->'.$val.'</br>';
}
?>

注意:要用file_get_contents('php://input') 取得json的值再以json_decode()解析

顯示結果:

執行時直接呼叫AJAX的function,所以看不出效果,但其實最主要的目的在於

以AJAX傳送JSON給PHP，非常好用!!

有捨才有得

2012年10月25日星期四

[php][javascript]以ajax傳送json物件,還原陣列(物件)並執行

2 則留言:

2012年10月25日 星期四

[php][javascript]以ajax傳送json物件,還原陣列(物件)並執行

2 則留言:

2012年10月25日星期四