Question

我正在使用PHP和MySQL来遍历产品并生成HTML代码，该代码由带有调用Javascript函数的onClick事件的img标记组成。我想通过onClick事件将PHP变量传递给Javascript函数。我正在使用jQuery，并认为使用PHP的json_encode（）函数和jQuery的jquery-json插件是个好主意。

我的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函数中执行某些操作来解码它？

Answer 1

我通常只是这样做，

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

我并没有真正看到只要json_encode正在履行职责，这会导致任何类型的“注入”攻击。

Answer 2

我不明白为什么你会陷入如此多的混乱..这是解决方案，它的工作原理

$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

Answer 3

我认为我过于复杂，我根本不需要使用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函数中做一些有用的事情。

使用JSON通过onClick将PHP数组传递给Javascript

3 个答案: