Question

我有这个jQuery函数：

function findProducts() {
    $.ajax({
        type: "POST",
        url: "code.php",
        data: {
            city: $(".city").val(),
            product: $("#product").val(),
        },
    }).done(function(data) {
        window.location.href = "results.html";
        var obj = JSON.parse(data);
        obj.forEach(function(index) {
            var tableBody = $("tbody");
            var row = $("<tr>");

            var columnImgName = $("<td>").addClass("img-name");
            var divImg = $("<div>").addClass("image");
            var image = $("<img>").addClass("image-product").attr("src", "img/no-image.png");
            var nameProduct = $("<p>").addClass("name-product").index[0]);

            var columnPrice = $("<td>").addClass("prico").index[1]);

            var rows = tableBody.append(row);

            rows.append(columnImgName).append(divImg).append(image);
            rows.append(columnImgName).append(nameProduct);
            rows.append(columnPrice);
        });
    });
}

我正在尝试在我的数据库上运行搜索，通知城市和产品。我正在为我的服务器上的php代码创建一个ajax，它返回带有我搜索的数据的JSON。我想获取在这个JSON上返回的数据并转到另一个页面，在那里我将打印一个包含我得到的信息的表。我尝试了这段代码，但它无法正常工作，它只是重定向到其他页面，但表格没有出现。该表的HTML代码如下：

        <table>
            <thead>
                <tr>
                    <th>Product</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

Answer 1

show your data on same page by using bootstrap datatable
Include all necessary js and bootstrap 
View
<table id="table_id1" style="border-bottom: 1px solid #ddd" class="table table-advanced table-bordered table-hover">
    <thead class="blue">
        <tr>
            <th>Product</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <?php                                       
            foreach($Data as $row) {    
        ?>  
        <tr class="odd gradeX">
            <td class="center"><?php echo $row['product'];?></td>
            <td class="center"><?php echo $row['price'];?></td>
        </tr> 
        <?php }?>
    </tbody>
</table>


$("#search_button").click(function() {
        $.post("code.php",{"city": $('#city').val(),"product": $('#product').val()},function(data){
            tableid="table_id";
            update_dataTable(data,tableid);
        },'json');
});

function update_dataTable(data,tableid) {

    var oTable = $("#"+tableid).dataTable();
    oTable.fnClearTable();

    $(data).each(function(index) {  
        var row = [];


        row.push(data[index].product);
        row.push(data[index].price);

        oTable.fnAddData(row);
    });
}

show your data on same page by using bootstrap datatable

Answer 2

我能够通过在表单中添加一个动作来完成它，这会将我带到页面results.html并且还可以使用方法获得的表单。

在页面结果上，我导入了以下jQuery代码，从URI获取数据并在我的数据库上运行搜索

var qs = (function(a) {

if (a == "") return {};

var b = {};

for (var i = 0; i < a.length; ++i) {

    var p=a[i].split('=', 2);

    if (p.length == 1) {

        b[p[0]] = "";
    } else {

        b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
    }
}

return b;
})(window.location.search.substr(1).split('&'));

var city = qs["city"];
var product = qs["product"];

function findProducts() {

    $.ajax({
        type: "POST",
        url: "code.php",
        data: {
            city: city,
            product: product,
        },
    }).done(function(data) {

        var obj = JSON.parse(data);

        obj.forEach(function(index) {

            var name = index[0];
            var price = index[1];

            var bodyTable = $("body").find("tbody");
            var row = makeRows(name, price);

            bodyTable.append(row);
        });
    });
}

function makeRows(name, price) {

    var row = $("<tr>");

    var columnImgName = $("<td>").addClass("img-name");
    var divImg = $("<div>").addClass("image");
    var image = $("<img>").addClass("image-product").attr("src", "img/no-image.png");
    var nameProduct = $("<p>").addClass("name-product").text(name);

    divImg.append(image);
    columnImgName.append(divImg);
    columnImgName.append(nameProduct);

    var columnPrice = $("<td>").addClass("price").text(price);

    row.append(columnImgName);
    row.append(columnPrice);

    return row;
}

findProducts();

通过连接到PHP服务器的ajax从搜索中打印包含数据的另一页

2 个答案: