Javascript 使用ajax加载内容并附加

我正在做的是以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);
?>

<?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);
?>

另外，我正试图通过这个

窗口.History.pushState（{urlPath:'&view=products'}，“，'&view=product'）”）推送url中的状态

，但它不推送表示它不显示附加的url

应该怎样 在pushState url

index.php之前？store=abc

pushState url

index.php之后？store=abc&view=products

---

有人能帮我吗？

解析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>

$（文档）.ready（函数（）
{
$.ajax(
{
url:'product.php'，
数据类型：“JSON”，
成功：功能（数据）
{
var json=$.parseJSON（数据）；
对于（i=0；i试着这样做：

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);
?>

<?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);
?>

关于“pushState”，请看以下示例：

$(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');
        }
    });
});