php和js如何通過json互相傳遞資料相關問題探討

來源:互聯網
上載者:User

當我們在結合php和javascript實現某些功能時,經常會用到json。json是js的一種資料格式,可以直接被js解析。而php無法直接讀取json資料,但是php提供了json_decode函數來對json資料進行轉化,從而可以被php指令碼訪問。同時,php也提供了json_encode函數來將資料轉化成json格式。那麼,js中的原生json與php中通過json_encode函數轉化後的json是否完全一樣呢?今天,站長就和大家一起來探討這個問題。

我們通過php向javascript傳遞數組資料時,通常要將其轉化為json格式,一遍javascript來擷取,那麼我們就以數組為例,先來看一下兩者之間的區別。

1、一維數組
考慮php數組 複製代碼 代碼如下:$array=array("1","2","3");

使用json_encode函數轉化後,對應的json字串為 複製代碼 代碼如下:["1","2","3"]。

細心的朋友很快就發現,轉化後得到的json字串,就是javascript中的數組形式,那麼是否可以用js的數組訪問方式來訪問呢?
當然是可以的,但是你將這個json字串傳遞給給js時,需要使用urlencode函數對其編碼,如: 複製代碼 代碼如下:<a href="javascript:show('<?php echo urlencode(json_encode(array('1','2','3')));?>')" id="aj">訪問json</a>

我們可以用下面的js代碼來驗證: 複製代碼 代碼如下:function show(str){
var jobj=eval_r(decodeURI(str));
alert(jobj[2]);
}

大家自己試一試就會發現,是的,可以用js中訪問一維數組的方式來訪問它。eval方法將json字串解釋為json對象,因為傳遞過來的是字串,不轉化的話,你得到將是字串中第三個字元的值。
我們再來對這個一維數組做一下變化,我們發現上面的一維數組沒有指定索引,所以它預設為數字索引,現在我們來給它加上鍵名:
考慮php數組 複製代碼 代碼如下:$array=array('a'=>'1','b'=>'2','c'=>'3');

使用json_encode函數轉化後,對應的json字串為 複製代碼 代碼如下:{"a":"1","b":"2","c":"3"}


我們很快就發現了其中的不同,最明顯的就是字串兩端的[]變成了{},那麼這個字串是否也可以按上面那樣處理後被js訪問呢?我們不防試一試: 複製代碼 代碼如下:<a href="javascript:show('<?php echo urlencode(json_encode(array('a'=>'1','b'=>'2','c'=>'3')));?>')" id="aj">訪問json</a>
function show(str){
var jobj=eval_r(decodeURI(str));
alert(jobj.a);
}

大家如果動手試了就知道,點選連結後,沒有出現彈窗。為什麼呢?是PHP產生的json字串格式不對嗎?不是的,這是我們在使用eval函數解釋的時候,出錯了。把上面的函數代碼換成: 複製代碼 代碼如下:function show(str){
var jobj=eval_r('('+decodeURI(str)+')');
alert(jobj.a);
}

再試試吧!怎麼樣,可以訪問了吧。這告訴我們,在使用eval方法處理帶有鍵名的json字串時,需要在字串兩端加速括弧。至於為什麼,站長也不知道,站在巨人的肩膀上而已。
這裡要注意,儘管PHP產生的json字串
{"a":"1","b":"2","c":"3"}被傳遞給js後無法被直接解釋為json格式,但是如果你在js中使用該字串直接建立json資料,是可以的。試試下面的代碼吧: 複製代碼 代碼如下:var jobj={"a":"1","b":"2","c":"3"};
alert(jobj.b);

2、二維數組
二維數組在PHP用的應用非常廣泛,因此瞭解二維數組轉化後的json格式非常重要。有了上面的例子做鋪墊,下面站長就直接給出範例程式碼: 複製代碼 代碼如下:<a href="javascript:show('<?php echo urlencode(json_encode(array(array('1','2','3'))));?>')" id="aj">訪問json</a>
function show(str){
var jobj=eval_r(decodeURI(str));
alert(jobj[0][0]);
}

大家運行,會發現,這跟一維數組差不多,這是不帶鍵名的例子,因此在show函數中,去掉字串兩端的括弧也是可以的。
下面,我們對二維數組進行一下變化,在第二維中加入鍵名,請看範例程式碼: 複製代碼 代碼如下:<a href="javascript:show('<?php echo urlencode(json_encode(array(array("a"=>'1',"b"=>'2','3'))));?>')" id="aj">訪問json</a>
function show(str){
var jobj=eval_r('('+decodeURI(str)+')');
alert(jobj[0].a);
}

大家運行代碼後,發現,這裡我們訪問json資料的方式有點不一樣。上面我們用的是
alert(jobj[0][0]);
而這裡我們用的是
alert(jobj[0].a);不要問我為什麼,就是這樣。這就是json的訪問方式。
上面的例子,我們對二維數組的第二維添加了鍵名,下面我們對第一維添加鍵名,看看訪問方式又有什麼不同: 複製代碼 代碼如下:<a href="javascript:show('<?php echo urlencode(json_encode(array('k'=>array('1','2','3'))));?>')" id="aj">訪問json</a>
function show(str){
var jobj=eval_r('('+decodeURI(str)+')');
alert(jobj.k[1]);
}

這裡我們使用的是
jobj.k[1]這樣的方式,大家一定已經發現了,只要數組中含有鍵名,當數組被轉化為json格式後,就要使用
json對象.鍵名
這樣的方式來訪問該鍵下的元素,上面的例子中,k鍵下的數組元素是數字索引,所以在json中使用k[1]這樣的方式來訪問。
下面,我們對數組的第一維和第二維都添加鍵名: 複製代碼 代碼如下:<a href="javascript:show('<?php echo urlencode(json_encode(array('k'=>array("a"=>'1','2','3'))));?>')" id="aj">訪問json</a>
function show(str){
var jobj=eval_r('('+decodeURI(str)+')');
alert(jobj.k.a);
}

正如上面所提到的,只要含有鍵名,就必須以
json對象.鍵名
的方式來訪問,如果有多個鍵就要用
json對象.鍵名.鍵名...
,不要問我為什麼,這就是json的訪問方式,只有javascript的發明者能向你解釋,他為什麼要這樣規定。
結論:
1、將php中的數組轉化為json字串傳遞給js時。如果數組沒有指定鍵名,那麼可以直接使用js的eval方法將其轉化為json格式供js處理;如果數組中含有鍵名,那麼在使用eval方法處理時,需要使用
()
將json字串括起來。
2、如果數組中含有鍵名,轉化為json字串後,在js中要用
json對象.鍵名.鍵名...
的方式來訪問,如果是數字索引則用
json對象[1]
或者
json對象.鍵名[1]
這樣的方式。
上面,我們主要討論了,在PHP向js傳遞json字串時,需要注意的事項。下面我們再來討論,用js向php傳遞json字串時需要如何處理。
聰明的你肯定已經知道了,只要將json資料用引號引起來作為字串傳遞給PHP【通常用ajax進行】就可以用json_decode函數解碼了。沒錯!就是這樣!但是在構造json字串的時候一定要仔細,如果你不經常構造json字串,那麼不妨用
echo json_encode(array('k'=>array("a"=>'1','2','3')))
這樣的方式,查看你需要構造的目標字串的json格式。這樣你就可以在js中根據你想要的結果來構造了!
好了,今天對php和js之間如何使用json資料進行通訊就討論到這裡,大家可以自己再試試將php的物件類型進行json編碼後如何傳遞給js。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.