javascript - 发送 HTML 代码到 ajax

Question

我需要将此 HTML block 作为响应(或请求？)发送到 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
        }
    });