PHP AJAX HTML：在 foreach 循环中更改唯一表数据

Question

我是 PHP 和 Ajax 的新手。我正在尝试创建一个对象数据表，我可以在其中根据<select><option>... 表单选择显示的数据。

我有一个如下所示的 PHTML 模板：

<?php
$content = "";
// creates data selector
$content .= "
            <form id = select_data>
                <select id = data_selection>
                    <option value = data1>Data 1</option>
                    <option value = data2>Data 2</option>
                    <option value = data3>Data 3</option>
                    <option value = data4>Data 4</option>
                </select>
            <input id = selected_data type=submit />
            </form>";
// creates table header
$content .= "
            <tr>
                <th>Data</th>
            </tr>";

$array_ids = array(1, 2, 3); // etc, array of object id's
foreach ($array_ids as $array_id) {
    $object = // instantiate object by array_id, pseudocode
    $object_data = $object->getData('default-data'); // get default data to display
    // create table item for each object
    $content .= "
                <tr>
                    <td><p>$object_data</p></td>
                </tr>";
}
print $content;
?>

这会打印出表格内容，通过 id 加载对象，然后获取并显示 <p> 标记内的默认数据。 然后我有一些 Javascript，如下所示：

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
    $('#select_data').on('submit', function(e){ // get selected data type
        e.preventDefault();
        var data_selected = $("#data_selection :selected").val(); // create var to pass to ajax
        $.ajax({
            type: "POST",
            url: 'post.php',
            data: {data_selected: data_selected},
            success: function(data){
                $("p").html(data); // replace all <p> tag content with data
            }
        });
    });
});
</script>

此 Javascript 获取选定的数据类型，从中创建一个变量以传递给 ajax，然后调用 post.php，如下所示：

<?php
$attribute = false;
if (isset($_POST['data_selected'])){
    $data = $_POST['data_selected']; // assigns variable out of ajax data
    $object = //instantiate object, again pseudocode
    $object_data = $object->getData($data); // get new data to replace into the ```<p>``` tag
    echo $object_data;
}
?>

问题是我拥有的 Javascript 将每个 <p> 标记更改为 foreach 循环迭代的最后一个数据，因为每个 <p> 标记都不是唯一标识的，并且 Ajax 不会根据唯一标识更新数据标识符，例如$array_id。这让我想到了我尝试的解决方案。

我尝试使用以下内容识别每个 <p> 标记：

<td><p id = $array_id>$object_data</p></td>

然后从数组 ID 中创建一个新的 Javascript 变量：

var p_tag_id = <?php echo $array_id; ?>;

最后根据var p_tag_id制作Ajax成功函数目标元素ID：

$("#" + p_tag_id).html(data);

虽然这不会像以前那样更改所有 <p> 标记，但它只会更改最终的 <p> 标记并使其之前的所有实例保持不变，因为 Javascript 没有遍历每个 <p> 标记，或者因为 foreach循环不会将 Javascript 作为每个 $array_id 的函数调用。

如何重写此代码，以便 Ajax 唯一地更新每个表项的数据，而不是使用相同的数据更新它们？有没有更好的方法来解决这个问题？

Answer 1

您需要一种方法来识别包含要更新的<p> 标记的表格行，也许SELECT 元素的value 属性会有所帮助。

您可以通过使用 slice 去除最后一个字符（即数字）从 data_selected 变量中获取单击选项的编号：

var num = data_selected.slice(-1) - 1;

（减去 1，因为表行是零索引的）

那么，在AJAX代码块的成功函数中：

$('table tr').each(function(i,v){
    if (i == num){
        $(v).find('td').find('p').html(data);
    }
});

上面的代码抓取了所有的表行（作为一个集合）并一个接一个地遍历它们。在函数中，i 是行的索引号，v 是行本身。索引号从零开始，这就是为什么您之前从（例如）data3 [3] 值中减去 1，留下num == 2。找到正确的行号后，使用.find() 在该行中找到<td>，然后在该<td> 和Bob 的叔叔中找到<p>。

我没有测试上面的代码，所以示例中可能存在错误，但这种方法应该可以工作。

Answer 2

我想出了一个解决方案。毕竟，我将$array_id 分配给每个<p> 标签是为了唯一标识它们：

<td><p id = $array_id>$object_data</p></td>

然后我遍历所有<p> 标签并将$array_id 的this <p> 标签分配给一个变量，如下所示：

$("p").each(function() {
    var array_id = $(this).attr("id");

最后我根据 ID 制作了 Ajax success 目标元素：

$("#" + array_id ).html(data);

这里是任何有兴趣的人的完整 Javascript 代码。希望这对其他人有所帮助！

<script>
$(document).ready(function(){
    $('#select_data').on('submit', function(e){
        e.preventDefault();
        var data_selected = $("#data_selection :selected").val();
        $("p").each(function() {
            var array_id = $(this).attr("id");
            $.ajax({
                type: "POST",
                url: 'post.php',
                data: {data_selected: data_selected, array_id: array_id},
                success: function(data){
                    $("#" + array_id).html(data);
                }
            });
        });
    });
});
</script>