我应该如何将从 ajax 调用中获取的数据放入隐藏的 div 框中答案

【问题标题】：how should i put data fetched from ajax call in hidden div box我应该如何将从 ajax 调用中获取的数据放入隐藏的 div 框中
【发布时间】：2026-02-21 04:20:02
【问题描述】：

我正在做一个项目并遇到一个模块。

第 1 页
用户必须从搜索栏搜索，这会将他带到第 2 页。

第 2 页
在第 2 页上，所有获取的结果都将在 div 中显示给用户。每个结果都有一个与之关联的复选框。

当我单击添加到比较复选框时，执行 ajax 调用并且获取的选定结果应该出现在隐藏的 div 中。

我的问题是它只在隐藏的 div 中显示第一个结果，而不能与另一个结果一起使用。

我的第2页代码

 <script type="text/javascript">
$(document).ready(function()
{
    var check = $('#compare').val();
    $("#compare").change(function() {
if(this.checked) {        
    $.ajax({
        type: 'POST',
        url: 'compare.php',
        dataType : 'JSON',
        data:{value : check},
        success: function(data)
        {
            console.log(data);
            $('#compare_box').html(data);               
        }
    });       

  $("#compare_box").show();
}
else
{
    $("#compare_box").hide();
}       
 });
});
</script>
</head>
<body>
<?php
$query = $_GET['search_bar'];
$query = "call fetch_data('$query')"or die(mysqli_error($conn));
$result = mysqli_query($conn,$query);
while($row = mysqli_fetch_array($result))
{
  $id = $row['course_id'];
$title = $row['course_title'];
$description = $row['course_description'];
$course_url = $row['course_url'];
$video_url = $row['course_video_url'];
$fee = $row['course_fee'];
$duration = $row['course_duration'];
$start_date = $row['course_start_date'];
$university = $row['university_name'];
$course_provider = $row['course_provider_name'];
$instructor = $row['instructor_name'];

         $_SESSION['result'][$id]  = Array('id'=> $id,'course_title' => $title,'course_description'=> $description,'course_url' => $course_url,'video_url' => $video_url,'fee' => $fee,'course_duration'=>$duration,'start_date'=>$start_date,'university' => $university,'course_provider'=>$course_provider,'instructor'=>$instructor);
?>
    <div id='compare_box'>                  
        </div>      

     <div class="col-md-3 photo-grid " style="float:left">

        <div class="well well-sm">

       <a href="final.php?id=<?php echo $id;?>&name=<?php echo $title;?>" target="_blank">
        <h4><small><?php echo $title; ?></small></h4>
       </a>
     <br>
     <input type ='checkbox' name="compare" id="compare" value="<?php echo $id;?>">add to compare
     </div>
</div>
<?php  
}
?>

page3 compare.php

<?php
session_start();
include 'includes/dbconfig.php';
$check = $_POST['value'];
$sql = "SELECT * from course_info_table where course_id = '$check' " or   die(mysqli_error($conn));
$result = mysqli_query($conn,$sql);

$index = 0;
while($row = mysqli_fetch_array($result))
{
    $title = $row['course_title'];

 ?>
<?php
}
echo json_encode($title);
 ?>

【问题讨论】：

标签： javascript php jquery ajax

【解决方案1】：

你可以改变

<input type ='checkbox' name="compare" id="compare" value="<?php echo $id;?>">

到

<input type ='checkbox' name="compare" class="compare" value="<?php echo $id;?>"> ^you can only have one unique 'id' value in your html doc, which means your first id="compare" will work fine and others with id="compare" will be ignored by the DOM tree

参考：

http://www.w3schools.com/tags/att_global_id.asp

【讨论】：

哦，谢谢，效果很好，现在当我单击添加以比较复选框时，它只是传递了第一个结果值，