Question

这是我的代码

ex1.php

<body>

<form>

  <label>
    <input type="checkbox" value="LH" name="name">LH</label>
  <label>
    <input type="checkbox" value="LJ" name="name">LJ</label>
  <label>
    <input type="checkbox" value="LL" name="name">LL</label>
  <label>
    <input type="checkbox" value="FA" name="name">FA</label>
  <label>
    <input type="checkbox" value="FB" name="name">FB</label>
  <label>
    <input type="checkbox" value="FU" name="name">FU</label>
</form>

<!--modal-->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <?php

        $test = $_POST['test'];

        $servername = "localhost";
        $username = "root";
        $password = "";


// Create connection
        $conn = mysqli_connect($servername, $username, $password);


// Check connection
        if (!$conn) {
        die("Connection failed: " . mysqli_connect_error());
        }
        echo "Connected successfully";

        mysqli_connect_db("db",$conn);

        $sql = "SELECT Subcat FROM subcat where CatId=".$test." ";
        $res = mysqli_query($conn,$sql);
        while($row = mysqli_fetch_assoc($res)){
        echo "<input type='checkbox' name='category[]' value='".$row['Subcat']."'>"
        .$row['Subcat'];
        echo "<br>";   
}
        ?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>


</body>

ex1.js

$document.ready(function(){
    $(":checkbox").click(function(){
        var value_ck = $(this).val();
        $.ajax(
            url:"ex1.php",
            type:"post",
            data:{test:value_ck},
            success:function(){
                $("#myModal").modal();




                });
    });
});

我想在这里做的事情如下

我在表单中有一个复选框列表。当我单击一个复选框时，会出现一个模态，其中包含来自数据库的相应数据。我是Jquery的初学者。我的代码无效。我找到了解决方案。但我无法做到。

有人可以帮我吗？

Answer 1

您可以使用

$('#myModal').modal('show')

打开ID为myModal和

的模型

$('#myModal').modal('hide')

隐藏模态

从帖子请求加载数据后，使用success:function()中的值填充模型，并使用$('#myModal').modal('show')向用户显示模型

Answer 2

如果你不熟悉JSON / api的东西，请这样做：

<强> ex1.php

<body>

<form>

  <label>
    <input type="checkbox" value="LH" name="name">LH</label>
  <label>
    <input type="checkbox" value="LJ" name="name">LJ</label>
  <label>
    <input type="checkbox" value="LL" name="name">LL</label>
  <label>
    <input type="checkbox" value="FA" name="name">FA</label>
  <label>
    <input type="checkbox" value="FB" name="name">FB</label>
  <label>
    <input type="checkbox" value="FU" name="name">FU</label>
</form>

<!--modal-->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

</body>

<强> modal.php

<?php

            $test = $_POST['test'];

            $servername = "localhost";
            $username = "root";
            $password = "";


    // Create connection
            $conn = mysqli_connect($servername, $username, $password);


    // Check connection
            if (!$conn) {
            die("Connection failed: " . mysqli_connect_error());
            }
            echo "Connected successfully";

            mysqli_connect_db("db",$conn);

            $sql = "SELECT Subcat FROM subcat where CatId=".$test." ";
            $res = mysqli_query($conn,$sql);
            while($row = mysqli_fetch_assoc($res)){
            echo "<input type='checkbox' name='category[]' value='".$row['Subcat']."'>"
            .$row['Subcat'];
            echo "<br>";   
    }
?>

<强> ex1.js

$document.ready(function(){
    $("INPUT[type=checkbox]").click(function(){
        var value_ck = $(this).val();
        $.ajax(
            url:"modal.php",
            type:"post",
            data:{test:value_ck},
            success:function(modalBody){
                $("#myModal .modal-body").html(modalBody);
                $("#myModal").modal();
            });
    });
});

选中复选框后如何获取模态？

2 个答案: