Question

我正在做的是以json格式从php文件加载内容

products.php

<?php 
    $stmt = $mysqli->prepare("SELECT * FROM products LIMIT 10");
    $stmt->execute();
    $products = $stmt->get_result();
    $product_array = array();
    while($product = $products->fetch_assoc()){
        $product_array[] = $product;
    }
    echo json_encode($product_array);
?>

home.php

<style>
.product
{
width: 100px;
height:100px;
margin-bottom: 10px;
}
</style>

<div class="product_area">
<div class="product">
    <h3>Product 1</h3>
    <p>Price: $10</p>
</div>
<div class="product">
    <h3>Product 2</h3>
    <p>Price: $10</p>
</div>
<div class="product">
    <h3>Product 3</h3>
    <p>Price: $10</p>
</div>
<div class="product">
    <h3>Product 4</h3>
    <p>Price: $10</p>
</div>
</div>

我已经在product_area中有4个产品现在我想在文档加载后立即获取其他产品，所以我使用了ajax

$(document).ready(function()
{
    $.ajax(
    {
        url: 'product.php',
        dataType: 'JSON',
        success: function(data)
        {
            //This is where I am stucked. How do I append the new data beneath the current data in `product_area`. 
            for(i=0; i<=data.length; i++)
            {
            }
            window.History.pushState({urlPath:'&view=products'},"",'&view=product');
        }
    });
});

此外，我正在尝试使用此window.History.pushState({urlPath:'&view=products'},"",'&view=product')推送网址中的状态，但它不会推送它意味着它不会显示附加的网址。

应该如何在pushState url index.php?store=abc之前在pushState url index.php?store=abc&view=products

之后

有人可以帮我这个吗？

Answer 1

尝试这样做：

products.php

<?php 
    header('Content-Type: application/json');

    $stmt = $mysqli->prepare("SELECT * FROM products LIMIT 10");
    $stmt->execute();
    $products = $stmt->get_result();
    $product_array = array();
    while($product = $products->fetch_assoc()){
        $product_array[] = $product;
    }

    echo json_encode($product_array);
?>

javascript - 只需克隆第一个div然后重复

$(document).ready(function() {
    $.ajax({
        url: 'product.php',
        dataType: 'JSON',
        success: function(data) {
            //This is where I am stucked. How do I append the new data beneath the current data in `product_area`. 
            data.forEach(function (product) {
                var newProductBox = $('.product:first').clone();

                newProductBox.find('h3').text(product.nameInYourColumnDb);
                newProductBox.find('p').text('Price: $' + product.priceInYourColumnDb);

                $('.product_area').append(newProductBox);
            });

            window.History.pushState({urlPath:'&view=products'},"",'&view=product');
        }
    });
});

关于“pushState”看一下这个例子： https://developer.mozilla.org/en-US/docs/Web/API/History_API#Example_of_pushState()_method

Answer 2

解析Json数据并将其附加到product_area类

<script>
    $(document).ready(function()
    {
        $.ajax(
        {
            url: 'product.php',
            dataType: 'JSON',
            success: function(data)
            {
                var json = $.parseJSON(data);
                for(i=0; i<=json .length; i++)
                {
                   $('.product_area').append('<div class="product"><h3>Product Name: '+json[i].product_name+'</h3><p> Price :'+json[i].product_price+'</p></div>');    
                }
                window.History.pushState({urlPath:'&view=products'},"",'&view=product');
            }
        });
    });
    </script>

使用ajax加载内容并附加

2 个答案: