如何通过隐藏的输入元素将 PHP 字符串变量传递给 Javascript 函数

Question

我正在为多语言语料库使用 solr solrium。关于以每种语言检索信息，一切都按预期进行。在下面的代码中，我有两个隐藏的输入元素，我在其中传递了两个 php 变量，然后我尝试将这些元素的值 post 传递给 javascript 函数，以便添加一个行到现有 table 并在其单元格中显示我的变量值。

我的 php 代码是这样的： ...

if ($highlightedDoc) {              
    foreach ($highlightedDoc as $field => $highlight) {
      $hlight = implode(' (...) ', $highlight);                         
      echo '<table id="lngData" text-align:left; border:none;  cellpadding="02" cellspacing="02">';                     
    echo '<tr><td><b>' . $counter . '</b></td><td>' . $subj_en. '</td><td>' . $hlight . '</td></tr>';
    echo '<tr><td>' ."" . '</td><td>' . $subj_el . '</td><td>' .$con_el. '</td></tr>';
    echo '<tr><td><input id="q" name="q" type="hidden" value=' . $subj_fr . '/></td></tr>';
    echo '<tr><td><input id="s" name="s" type="hidden" value='. $con_fr . '/></td></tr>';
    echo '<tr><td>' ."" . '</td><td><button onclick="showLng(q, s);">Create row</button></td><td><button onclick="myDeleteFunction()">Delete row</button></td></tr>';
    echo '</table>';                    

    }

这是我的 javascript 函数 showLng:

       function showLng(x, y) {
        var table = document.getElementById("lngData");
        x = document.getElementById("q").value; 
        y = document.getElementById("s").value; 
        var row = table.insertRow(0); 
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        cell1.innerHTML = "";
   cell2.innerHTML = x;
cell3.innerHTML = y;
}

上面的 onclick 事件添加了 table 行，但它截断了结果语句。它仅输出每个句子的第一个单词。有人可以帮我吗？我读了很多关于如何将 php 字符串变量传递给 javascript 的 post，但没有用。任何帮助将不胜感激。提前谢谢你。

Answer 1

你的主要问题是如何 "pass" PHP 数据到 Javascript...我记得一开始这让我很困惑所以让我一步一步解释：

假设你用 PHP 输出 Javascript 像这样：

echo '<script> console.log("Hello"); </script>';

这将输出作为脚本标记的字符串，在其中我们调用 console.log 函数，将字符串 "Hello" 作为参数传递。这一切都只是一个字符串。

现在让我们将 "Hello" 字符串放入 PHP 中的一个变量中：

$log = 'Hello';

echo '<script> console.log("' . $log . '"); </script>';

现在我们 "passed" PHP 数据到 Javascript。和上面一样的字符串。

另一个例子：

echo '<script>';
echo 'var hello = "";';
echo 'var world = "World";';
echo 'console.log(hello + " " + world);';
echo '<script>';

我们想用 PHP 填充 hello 变量。所以我们只添加它：

$helloString = 'Hello';

echo '<script>';
echo 'var hello = "' . echo $helloString . '";';
echo 'var world = "World";';
echo 'console.log(hello + " " + world);';
echo '<script>';

请注意 PHP 输出在 Javascript 中被 " 包围，因为即使我们输出带有 PHP 的字符串，如果我们省略 " 像这样：

echo 'var hello = ' . echo $helloString . ';';

PHP 也不会添加它们，因此浏览器中的输出将如下所示：

var hello = Hello;

无效，必须是：

var hello = "Hello";

你在代码中犯了这个错误，在 HTML:

echo '<tr><td><input id="q" name="q" type="hidden" value=' . $subj_fr . '/></td></tr>';

所以你的输出将是（假设 $subj_fr 是一个字符串 "Hello World"）：

<input ... value=Hello World />

这是不正确的。

我注意到您正在创建许多具有相同 ID (lngData) 的 table，并且您的隐藏输入也都具有相同的 ID。我怀疑这是故意的吗？

在下面的代码中，为每个 table 创建了一个唯一的 ID。我还删除了隐藏元素，取而代之的是，将值与 table 的 ID 一起直接传递给 showLng 函数。我还改变了你用 PHP 构建 HTML 的方式，我这样做只是为了向你展示一种不同的方式（我会说它看起来更干净）来输出 HTML 和 PHP，而不是使用 echo.

我不知道修复重复的 ID 是否能解决您的问题，但请尝试一下。

if ($highlightedDoc) {
    $i = 0;

    foreach ($highlightedDoc as $field => $highlight) {
        $hlight = implode(' (...) ', $highlight);
        $tableId = 'lngData' . $i;
?>
    <table id="<?= $tableId ?>" style="text-align:left; border:none;"  cellpadding="02" cellspacing="02">
        <tr><td><b><?= $counter ?></b></td><td><?= $subj_en ?></td><td><?= $hlight ?></td></tr>
        <tr><td><?= "" ?></td><td><?= $subj_el ?></td><td><?= $con_el ?></td></tr>
        <tr><td><!-- removed unneeded hidden input --></td></tr>
        <tr><td><!-- removed unneeded hidden input --></td></tr>
        <tr><td><?= "" ?></td><td><button onclick="showLng('<?= $tableId ?>', '<?= $subj_fr ?>', '<?= $con_fr ?>');">Create row</button></td><td><button onclick="myDeleteFunction()">Delete row</button></td></tr>
    </table>
<?php
        $i++;
    }
}

showLng函数：

function showLng(tableId, x, y) {
    var table = document.getElementById(tableId);
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    cell1.innerHTML = "";
    cell2.innerHTML = x;
    cell3.innerHTML = y;
}

如何通过隐藏的输入元素将 PHP 字符串变量传递给 Javascript 函数

How to pass a PHP string variable through a hidden input element to a Javascript function

javascript

php

string

hidden

input