javascript - 将表单数据发送到嵌套在 div 中的页面

Question

这是我第三次尝试找到这个问题的答案，每次我都因为这样或那样的原因被否决。所以我再试一次。我正在尝试通过 ajax 从表单中的隐藏输入发送数据。隐藏的输入从一个 php 脚本中获取它的值。现在我似乎无法在接收页面上提取隐藏的输入值。现在，我发送的表单已生成并在 php 中传播，就像触发将表单发送到其他页面的 ajax 一样。

当我尝试从接收页面上的表单中调用信息时，它似乎没有从第一页接收到数据。我认为这是因为我没有收到任何错误，它不会显示数据，但它会触发位于获取数组之前的回显。

这是第一页的代码。除了表单发送部分之外，它在所有方面都适用于我正在尝试做的事情。我遗漏了很多内容，但其中包含 ajax 和表单部分。

<?php


$con=mysqli_connect("localhost","base","password","util");
// Check connection
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$sql = "SELECT * FROM recipes";
$result = mysqli_query($con,$sql);

while($row = mysqli_fetch_array($result)) {






        echo"




        <script>
   $(document).ready(function() {//start document ready
      $('#" . $row['id'] ."').click(function (e){
        e.preventDefault();

        $.ajax({
        type: 'POST',
        url: 'http://localhost/pages/receivingpage.php',
        data: $(\"f2\").serialize(),
success: function(d){
   $(\"#content-disp\").html(d);
}
    });
  });
 });//end document ready
</script>


        <div id=\"covera\">

        <div id=\"holder\" class=\"holder\">


<div id=\"disp\" class=\"disp\">

<div class=\"click diagonal panel\">
    <div id=\"" . $row['id'] ."\"  class=\"front\">
    <form id=\"" . $row['recipe'] ."\" name=\"f2\">
    <input type=\"hidden\" name=\"recipe\" value=\"" . $row['recipe'] ."\">
        <h2>
        " . $row['recipe'] ."<br></h2>
     <img src=\"http://localhost/img/" . $row['image'] ."\" alt=\"Recipe Image\" style=\"width:150px;height:100px;\">

    </form> 
    </div>


    <div class=\"back\">
        <div class=\"pad\">
            <h2>" . $row['recipe'] ."</h2>

            <p>" . $row['id'] ."</p>
            <p>" . $row['id'] ."</p>
                        <p>Number of Servings " . $row['servings'] ."</p>
            <p>Appx. Cooking Time: " . $row['cooking'] ." Minutes</p>
            <p>Numer of Calories: " . $row['calories'] ."</p>
        </div>
    </div>
</div>

</div>






            </div>

            </div>";


}

  mysqli_close($con);


?>   

这里是接收页面。它加载但只显示 echo 。如果我在 SELECT 语句中删除 WHERE，它会显示所有数据库结果(不是所需的结果)。

<?php


$con=mysqli_connect("localhost","base","password","util");
// Check connection
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$r = $_POST["f2"]['recipe'];
$sql = "SELECT * FROM recipes WHERE recipe ='".$r."'";
$result = mysqli_query($con,$sql);


echo "  2 ";



while ($row = mysqli_fetch_array($result)) {






echo "  " . $row['recipe'] ." ";


}

  mysqli_close($con);


?> 

任何帮助将不胜感激。

Answer 1

尝试使用 id 而不是表单名称来发布序列化数据。请参阅下面的示例代码。

data: $(\"#f2\").serialize(),

希望对您有所帮助。

请参阅下面更新的工作代码。

更新的答案:

page1.php

</script>
<?php

    $rows[0]['id'] = 1;
    $rows[0]['recipe'] = "Veg Rec";
    $rows[0]['cooking'] = "Hot cooking";
    $rows[0]['calories'] = 1000;
    $rows[0]['image'] = "image.png";
    foreach ($rows as $key => $row) {
    # code...
    echo"




        <div id=\"covera\">

        <div id=\"holder\" class=\"holder\">


<div id=\"disp\" class=\"disp\">

<div class=\"click diagonal panel\">
    <div id=\"" . $row['id'] ."\"  class=\"front\">
    <form id2=\"" . $row['recipe'] ."\" id=\"f2\">
    <input type=\"hidden\" name=\"recipe\" value=\"" . $row['recipe'] ."\">
        <h2>
        " . $row['recipe'] ."<br></h2>
     <img src=\"http://localhost/img/" . $row['image'] ."\" alt=\"Recipe Image\" style=\"width:150px;height:100px;\">

    </form> 
    </div>


    <div class=\"back\">
        <div class=\"pad\">
            <h2>" . $row['recipe'] ."</h2>

            <p>" . $row['id'] ."</p>
            <p>" . $row['id'] ."</p>
                        <p>Number of Servings " . $row['servings'] ."</p>
            <p>Appx. Cooking Time: " . $row['cooking'] ." Minutes</p>
            <p>Numer of Calories: " . $row['calories'] ."</p>
        </div>
    </div>
</div>

</div>






            </div>

            </div>



<script>
   $(document).ready(function() {//start document ready
      $('#" . $row['id'] ."').click(function (e){
        e.preventDefault();

        $.ajax({
        type: 'POST',
        url: 'page2.php',
        data: $(\"#f2\").serialize(),
success: function(d){
   $(\"#content-disp\").html(d);
}
    });
  });
 });//end document ready
</script>


            ";


}

?>  

page2.php

<?php

print_r($_POST);


?>