javascript - 从 ajax 调用时 HTML 未显示在 div 中

Question

这是我正在使用的ajax脚本

mypage.php 

$(".sales_anchor").click(function(e)
{
    e.preventDefault();
    var store_username = $("#storeUsername").val(); 
    var store_id = $("#storeID").val();
    var sale_id = $(this).attr('id');
    $.ajax(
    {
        url: 'scripts/sales_sales_products.php',
        data: {"store_id": store_id, "sale_id": sale_id,"store_username": store_username},
        method: 'POST',
        success: function(data)
        {
            data = $(data).find("div#mainContentOfSale");
            $("#contents").html(data);
            console.log(data);
        }
    });
})
<div id="contents"></div>

和

sales_sales_products.php

include_once '../includes/custom_functions.php';

$stmtgetallsales = $mysqli->prepare("SELECT * FROM store_sales ss 
    INNER JOIN store s ON s.store_id=ss.store_id 
    WHERE s.store_id=?");
$stmtgetallsales->bind_param("i",$_POST['store_id']);
$stmtgetallsales->execute();
$getallsales = $stmtgetallsales->get_result();
$sales_rows = $getallsales->num_rows;
$stmtgetallsales->close();
?>
    <script src="js/3.1.1/jquery.min.js"></script>
<script src="../js/jquery.countdown.min.js"></script>
<div class="container" id="mainContentOfSale">

                <?php while($allsales = $getallsales->fetch_assoc())
                {
                  $stmtgetsaleproducts = $mysqli->prepare("SELECT * FROM store_products sp
                    INNER JOIN store_sale_products ssp ON sp.product_id = ssp.product_id 
                    WHERE ssp.sale_id=? AND sp.store_id=?");
                  $stmtgetsaleproducts->bind_param("ii",$allsales['sale_id'],$_POST['store_id']);
                  $stmtgetsaleproducts->execute();
                  $getsaleproducts = $stmtgetsaleproducts->get_result();
                  $sale_product_rows = $getsaleproducts->num_rows;
                  $stmtgetsaleproducts->close();

                ?>
                  <script>
                    $(document).ready(function() {

                      $('.products_title').hide();
                      $(".timer").each(function() {
                        var time = this.id;
                        var timeLeft = time.split('-').reverse().join('-');
                        $(this).countdown(timeLeft, function(event) {
                          $(this).text(event.strftime("%D days %H hours %M minutes %S seconds remaining"));
                        });
                      })
                    });

                  </script>
                  <div class="sale_title">
                    <h2 class="title" id="sale_products"><?php echo $allsales['sale_name']; ?></h2> <span class="badge"><?php echo $sale_product_rows; ?></span> <span class="timer" id="<?php echo $allsales['sale_till']; ?>"></span></div>

                  <div class="sale_title"><span class="discount">Discount: <span class="color-text"><?php echo $allsales['sale_discount']; ?></span>%</span></div>
                  <div class="product_area wrapper ">
                    <?php while($saleproducts = $getsaleproducts->fetch_assoc()){?>

                      <div class="product">
                        <a href="<?php echo " index.php?store=".$_POST['store_username']." &view=single&product=".$saleproducts['product_id']; ?>">
                          <div class="product-image">
                            <img src="<?php echo image_check($saleproducts['product_image1']); ?>" />
                          </div>
                        </a>
                        <div class="product-details">
                          <div class="product-name">
                            <a class="name" href="<?php echo " index.php?store=".$_POST['store_username']." &view=single&product=".$saleproducts['product_id']; ?>"><span><?php echo substr($saleproducts['product_name'], 0, 20); ?></span></a>
                          </div>
                          <div class="product-price">
                            <span class="price">@ Rs. <?php echo sale_price($allsales['sale_discount'],$saleproducts['product_price']); ?>/</span>
                          </div>
                        </div>
                      </div>

                      <?php }?>

                    <?php } ?>

当我使用 sales_anchor 类调用 anchor 标记时，它会调用此脚本，并在检查元素和网络选项卡中，当我检查脚本时，它确实填充了数据和 html，一切都很好。但它不会在当前页面和 contents div 中被调用。我做错了什么？

Answer 1

您在屏幕截图中遇到 JSON.parse 错误。 (请注意结果窗口上方的红色条显示SyntaxError: JSON.parse: Unknown character at line 1 column 9 of the JSON data)

这是因为 $.ajax 尝试将响应解析为对象的 JSON 字符串(默认行为)。

请将您的ajax函数更改为:

$(".sales_anchor").click(function(e)
{
    e.preventDefault();
    var store_username = $("#storeUsername").val(); 
    var store_id = $("#storeID").val();
    var sale_id = $(this).attr('id');
    $.ajax(
    {
        url: 'scripts/sales_sales_products.php',
        dataType: "text",
        data: {"store_id": store_id, "sale_id": sale_id,"store_username": store_username},
        method: 'POST',
        success: function(data)
        {
            data = $(data).find("div#mainContentOfSale");
            $("#contents").html(data);
            console.log(data);
        }
    });
})
<div id="contents"></div>