Question

我需要将这个HTML块作为响应（或请求？）发送到ajax脚本，可能我还需要这个php部分...基本上我想打开一个模态框，其中包含我从变量生成的数据JS，当试图在ajax之外生成我的模态时，它没有很好地更新。

if(!empty($_SESSION['modalBoxID'])){
    $sql = "SELECT * FROM vehicle WHERE vehicle.id='{$_SESSION['modalBoxID']}'";
    $sqlquery = $db->query($sql);
    $_SESSION['modalBoxID'] = NULL;
}
?>


 <div class="modal-body display-content">
            <div class="container-fluid">
            <?php while($details = mysqli_fetch_assoc($sqlquery)) : ?>


                <div class="col-md-4"><img src=<?php echo $details['image'];?> class="image-responsive">

                <div class="col-sm-6">
                    <form action="add_cart.php" method="post">
                    <div class="form-group">
                        <label for="quantity">Quantity:</label>
                        <input type="text" class="form-control" id="quantity" name="quantity">
                    </div>
                    </form>
                </div>
                <div class="col-sm-6">
                    <br/>
                    <button type="button" class="add-to-basket btn btn-success" >ADD TO CART</button>
                </div>
                </div>
                <div class="col-md-1"></div>
                <div class="col-md-7" id="desc">
                    <p><b>Model:</b> <?php echo $details['model'];?></p>
                    <p><b>Engine:</b>  <?php echo $details['engine'];?></p>
                    <h4>Description</h4>
                    <p><?php echo $details['description'];?></p>
                    <hr>
                    <hr>
                </div>

            </div>
            </div>
            <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
  <?php endwhile; ?>
</div>

这是我需要将其发送到

的JS脚本

$(document).ready(function(){
// Otevre modal
$('.show-modal').click(function(){
    var product_id = $(this).attr('data-id');
        $.ajax({
        type: 'POST',
        cache: false,
        data: {modalID : product_id},
        url: 'includes/getID.php', // tomuto souboru predas idecko produktu, zapises do kosiku atd.
        success: function(data) {
            $('.modal-body').html(data)
            $("#itemBox").modal('show');
            // treba nejaka hlaska, ze byl pridan do kosiku
        }
    });


    // kod co otevre modal, mkrni na bootstrap manual jak je otevira nebo si otevreni nadefinuj sa
    //$('.product_id').val(productID);
});
    $(document.body).on('hidden.bs.modal', function () {
          $("#itemBox").removeData('bs.modal');
        });

Answer 1

你在php中错过了几个引号......

....并且您希望使用dataType: 'html'进行ajax调用。

$('.show-modal').click(function(){
    var product_id = $(this).attr('data-id');
        $.ajax({
        type: 'POST',
        cache: false,
        data: ({modalID : product_id}),
        dataType: 'html',
        url: 'includes/getID.php', // tomuto souboru predas idecko produktu, zapises do kosiku atd.
        success: function(data) {
            $('.modal-body').html(data)
            $("#itemBox").modal('show');
            // treba nejaka hlaska, ze byl pridan do kosiku
        }
    });

Answer 2

我通过修改我的JS来解决这个问题

$(document).ready(function(){
// Otevre modal
$('.show-modal').click(function(){
    var product_id = $(this).attr('data-id');
        $.ajax({
        type: 'POST',
        cache: false,
        data: {modalID : product_id},
        //datatype: 'html',
        url: 'includes/getID.php', // tomuto souboru predas idecko produktu, zapises do kosiku atd.
        success: function(data) {
            $("#itemBox").attr('data-id',product_id)
            $("#itemBox").modal('show').on('shown.bs.modal', function () {
                $(this).find(".modal-content").html(data)
            });


            // treba nejaka hlaska, ze byl pridan do kosiku
        }
    });


});

将HTML代码发送到ajax

2 个答案: