使用JSON將PHP數組通過onClick傳遞給Javascript

我使用PHP和MySQL循環產品並生成包含帶有調用Javascript函數的onClick事件的img標記的HTML代碼。我想通過onClick事件將PHP變量傳遞給Javascript函數。我使用jQuery，並認爲使用PHP的json_encode（）函數和jQuery的jQuery-json插件是一個好主意。使用JSON將PHP數組通過onClick傳遞給Javascript

我的PHP代碼如下所示：

$onclick = json_encode(array(
    'productid' => $productsRow['ProductID'], 
    'description' => $productsRow['Description'] 
)); 
echo "<a href=\"javascript:;\" onClick=\"changepic('" . htmlentities($onclick) . "')\">"; 
echo "<img src=\"products/$thumbnailfilename\" width=\"100\" height=\"100\">"; 
echo "</a>";

正如你可以看到我的JavaScript函數被調用changepic（）。我遺漏了一些與這個問題無關的代碼（即數據庫訪問代碼和決定縮略圖的位置）。

我的JavaScript代碼是：

function changepic(productarray) { 
    var productid = $.evalJSON(productarray).productid; 
    var productdesc = $.evalJSON(productarray).description; 
    alert(productid); 
}

我真的不執行任何操作與我傳遞給Javascript數組的PHP變量，我只是試圖得到它的第一個工作！我的最終目的是使用jQuery插入產品描述成<div>

一個樣本產品細節可能是這樣的：

ProductID: 30c7508008ac7597619ad9b90a97b40f 
Description: <p>Wide and Narrow Bands<br> 
Set with Top-Quality Diamonds</p><p>

正如你所看到的描述包含HTML代碼，以及一個換行符在<br>標籤之後。

所產生看起來像這樣的HTML：

<a href="javascript:;" onClick="changepic('{&quot;productid&quot;:&quot;30c7508008ac7597619ad9b90a97b40f&quot;,&quot;description&quot;:&quot;&lt;p&gt;Wide and Narrow Bands&lt;br&gt;\r\nSet with Top-Quality Diamonds&lt;\/p&gt;&quot;}')"><img src="products/tn-30c7508008ac7597619ad9b90a97b40f.jpg" width="100" height="100"></a>

當我運行此我得到一個JavaScript錯誤：

Event thread: click 
Uncaught exception: SyntaxError: JSON.parse: Unescaped control char in string: "<p>Wid 
Error thrown at line 18, column 2 in changepic(productarray) in http://isis/carats/view-collection.php?collectionid=32d0c7b8774f7f82a2d7c7d053286cfc: 
var productid = $.evalJSON(productarray).productid; 
called from line 1, column 0 in <anonymous function>(event) in http://isis/carats/view-collection.php?collectionid=32d0c7b8774f7f82a2d7c7d053286cfc: 
changepic('{"productid":"30c7508008ac7597619ad9b90a97b40f","description":"<p>Wide and Narrow Bands<br>\r\nSet with Top-Quality Diamonds<\/p>"}')

從我可以看到我做錯了什麼與編碼JSON字符串。我做了一些谷歌搜索，發現一些人說沒有編碼是必要的（我試過了，產品描述被認爲是HTML並且出現在頁面中），其他人則說使用addslashes（）和一些說htmlentities（）。

在我嘗試使用evalJSON（）之前，我需要在Javascript函數中做些什麼來解碼它嗎？

來源

2012-11-09 user1381228

你可以嘗試簡化它，只是使用csv字符串，而不是json。 json通常用於消息傳遞，這裏不需要。（「30c7508008ac7597619ad9b90a97b40f，

寬帶和窄帶
\ r \ n設置最高質量鑽石

」） – Codeguy007

您的代碼有什麼問題是您正在轉義的html實體;在'$ .evalJSON'看到這個字符串時，它看到了亂碼;它想要看到類似「{」productid「：」...「}」的東西，但是它看到了一堆神祕的'"'它不理解。 –

我認爲你是對的，我過於複雜的事情。在這個例子中不需要JSON，我只需要爲Javascript函數提供兩個參數，一個用於產品ID和另一個產品說明。然後，因爲描述包含必須編碼的HTML，所以我只需在PHP中對urlencode（）和decodeURIComponent（）中的Javascript進行編碼。 – user1381228

我通常只是這樣做，

var foo = <?php echo json_encode($foo); ?>;

，我實在不明白這是如何造成任何形式的「注入」的攻擊，只要json_encode正在做的工作。

來源

2012-11-09 05:04:08

您的建議將PHP變量直接放入Javascript代碼中，這可能在某些情況下可以，但我在頁面上有多個產品，我正在嘗試編寫一個通用的JavaScript函數，該函數無論點擊哪個產品都可以工作，因此將產品詳細信息傳遞給腳本。 – user1381228

@ user1381228 - 我想你誤會了。我試圖提出一個非常通用的例子。我認爲你的原始PHP代碼很好，除了''htmlentities（$ onclick）''。只需製作'$ onclick'，你就可以走了。 –

我不明白爲什麼你做了這麼多亂七八糟的..這裏是解決方案，它的工作原理

$onclick = json_encode(array(
'productid' => $productsRow['ProductID'], 
'description' => $productsRow['Description'] 
)); 
echo "<a id='test' href='' var='$onclick'>"; 
echo "<img src=\"products/$thumbnailfilename\" width=\"100\" height=\"100\">"; 
echo "</a>";

這是你的jQuery：

$(function(){ 

    $("#test").click(function(){ 
    var img = jQuery.parseJSON(($(this).attr("var"))); 
    alert(img.description); 
}); 

});

現在既然你有json對象，你可以創建div標籤，並把變量放在裏面或把內容放在已經存在的div標籤上。我相信你知道在這裏做什麼。

DINS

來源

2012-11-09 05:09:31 Dinesh

我想我是過於複雜的事情，我並不真的需要使用JSON的。

我改變我的PHP代碼，這個這個工作：

$productid = $productsRow['ProductID'] 
$description = rawurlencode($productsRow['Description']); 
echo "<a href=\"javascript:;\" onClick=\"changepic('$productid','$description')\">";

然後我的JavaScript看起來像這樣：

function changepic(productid, description) { 
    description = decodeURIComponent(description); 
    alert(description); 
}

這所以現在工作得很好，我可以繼續下去，真正做一些有用的東西在Javascript函數中。

來源

2012-11-11 22:30:52 user1381228

使用JSON將PHP數組通過onClick傳遞給Javascript

回答

相關問題