如何使用 Ajax 在不同的页面中呈现搜索结果答案

【问题标题】：How to render search results in a different page with Ajax如何使用 Ajax 在不同的页面中呈现搜索结果
【发布时间】：2012-02-07 06:57:48
【问题描述】：

我有一个网页在一个 php 页面中配置了搜索表单，在另一个页面中配置了带有搜索结果的表格，并且我有以下 javascript 函数来呈现带有搜索结果的表格：

function createRestaurantsTable() {
var table = document.createElement('table');
var str = '<table cellspacing="1" class="tablesorter">'; 
str += '<thead><tr><th>Nome</th><th>Morada</th><th>Distancia</th></tr></thead>';
for ( var i=0; i< restaurantArr.length; i++){
    str += '<tr><td><center class="IDcell">' + restaurantArr[i].name + '</center></td><td><center>' + restaurantArr[i].address + '</center></td><td><center>' + restaurantArr[i].distance.toFixed(2) + ' m</center></td></tr>';
}
str += '</table>';

str += "<div id='pager' class='pager'>";
str += "<form>"
str += "<img src='Tools/jquery.tablesorter/addons/pager/icons/first.png' class='first'/>";
str += "<img src='Tools/jquery.tablesorter/addons/pager/icons/prev.png' class='prev'/>"
str += "<input type='text' class='pagedisplay'/>";
str += "<img src='Tools/jquery.tablesorter/addons/pager/icons/next.png' class='next'/>";
str += "<img src='Tools/jquery.tablesorter/addons/pager/icons/last.png' class='last'/>";
str += "<select class='pagesize'>"
str += "<option selected='selected'  value='5'>5</option>"
str += "<option value='10'>10</option>";
str += "<option  value='15'>15</option>";
str += "<option  value='20'>20</option>";
str += "<option  value='25'>25</option>";
str += "<option  value='30'>30</option>";
str += "<option  value='35'>35</option>";
str += "<option  value='40'>40</option>";
str += "<option  value='45'>45</option>";
str += "<option  value='50'>50</option>";
str += "</select>";
str += "</form>";
str += "</div>"; 

document.getElementById('restaurants_table').innerHTML = str;

$("table").tablesorter({headers: { 0:{ sorter: false }, 1:{ sorter: false }, 2: { sorter: false }}, widthFixed: true ,widgets: ['zebra']}).tablesorterPager({container: $("#pager")});
$('tr').click(function(event) {
    var id = $(this).find(".IDcell").html();
    if(id) {
        window.location = "index.php?action=register_details&details_view_id=" + id + "&operation=v";
    }

});

}

我有更多的 JavaScript 代码，但我认为这足以说明我的问题。如果搜索表单在另一个 php 页面中，我如何呈现表格？

提前致谢！

【问题讨论】：

标签： javascript ajax

【解决方案1】：

首先，您可能不想混合使用三种技术并尝试只使用一种：

可以用 JQuery 替换将 HTML 写为字符串。例如：
```
$("<div>").attr("id", "pager").append(...)   
```
原生javascript通过Id寻址元素可以用JQuery代替。（第一种技术更快，但这更简单，并且使用一种技术而不是混合它们。例如：
```
$("#restaurant_table).html(insertedHtml);
```
您可能希望像这样生成寻呼机：
```
$("<div>").attr("id", "pager").append(...).appendTo("#restaurant_table");
```
我猜你应该至少按它的类来处理 tablesorter：
```
$("table.tablesorter")
```
如果您动态生成结构，您可能更愿意使用“实时”活页夹而不是点击活页夹 - 单击活页夹将只处理那些已经由浏览器构建的结构：
```
$("table.tablesorter tr").live("click", function(event) {...});
```

【讨论】：

我最终会改变它，但这并不能回答我的问题。如果搜索表单位于不同的 php 页面中，我如何在另一个页面中呈现表格？

【解决方案2】：

您可能会使用POST 将表格/表单传递到另一个页面。

【讨论】：

你能给我一个例子，如何使用我已经拥有的代码来做到这一点吗？