从通过连接到PHP服务器

Question

AJAX搜索打印数据的另一页我有这样的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

我能够把一个动作的形式去做，这就是会带我到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(); 

Answer 2

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