如何在不刷新页面的情况下获得搜索结果答案

【问题标题】：how to get result of search without refreshing page如何在不刷新页面的情况下获得搜索结果
【发布时间】：2013-11-20 01:12:50
【问题描述】：

我想在不刷新整个页面的情况下进行实时搜索。我是 ajax jquery 的新手。查看这张图片

当我们单击搜索按钮时，我想根据该结果过滤结果，而不用通过 PHP MySQL 和 AJAX Jquery 使用 sql 查询选择的所有那些必需参数刷新整个页面，如何使用 ajax、php、mysql 执行此操作。 .

这是搜索面板的html代码：-

 <form id="frmSearch" method="post">
            <table width="850px" style="font-family:Arial, Helvetica, sans-serif;font-size:11px;font-weight:bold">
            <tr>
            <td width="80px">I Want to</td>
            <td width="140px">Property Type</td>
            <td>Budget</td>
            <td>Bedrooms</td>
            <td>Location</td>
            </tr>


         <tr>
             <td width="80px"><select name="want-to" class="tb112" style="height: 20px; width:80px;">
                    <option value="0">Select</option>
                    <option value="1">Buy</option>
                    <option value="2">Rent</option>
                  </select>                </td>
                <td width="140px"><select id="propertyType" class="tb112" onchange="PropertyTypeSelectChanged()"    style="height: 22px; width:160px;"          name="propertyType"   >
                  <option selected="selected" value="-1"> ---Select--- </option>
                  <optgroup label="ALL RESIDENTIAL"></optgroup>
                  <option value=" 1">Multistorey Apartment</option>
                  <option value="2">Builder Floor Apartment</option>
                  <option value="3">Residential House</option>
                  <option value="4">Villa</option>
                  <option value="5">Residential Plot</option>
                  <option value="6">Penthouse</option>
                  <option value=" 7">Studio Apartment</option>
                  <option value="8">Service Apartment</option>
                  <option value=" 9">Holiday Home</option>
                  <optgroup label="ALL COMMERCIAL"></optgroup>
                  <option value="10">Commercial Office Space</option>
                  <option value=" 11">Office in IT Park/ SEZ</option>
                  <option value=" 12">Commercial Shop</option>
                  <option value=" 13">Space in Shopping Mall</option>
                  <option value=" 14">Commercial Showroom</option>
                  <option value=" 15">Kiosk</option>
                  <option value=" 16">Business Centre</option>
                  <option value=" 17">Commercial Land</option>
                  <option value=" 18">Warehouse/ Godown</option>
                  <option value=" 19">Guest House</option>
                  <option value="20">Hotel</option>
                  <option value="21">Hotel Sites</option>
                  <option value=" 22">Industrial Land</option>
                  <option value="23">Industrial Building</option>
                  <option value=" 24">Industrial Shed</option>
                  <optgroup label="ALL AGRICULTURAL"></optgroup>
                  <option value=" 25">Agricultural Land</option>
                  <option value=" 26">Farm House</option>
                </select></td>
                <td width="110px">
                    <select name="select" id="select1" class="tb112" style=" Height:20px; width:100px;">
                      <option value="-1">Min</option>
                      <option class="" value="1">Below 5 Lacs</option>
                      <option class="" value="500000">5 Lacs</option>
                      <option class="" value="1000000">10 Lacs</option>
                      <option class="" value="1500000">15 Lacs</option>
                      <option class="" value="2000000">20 Lacs</option>
                      <option class="" value="2500000">25 Lacs</option>
                      <option class="" value="3000000">30 Lacs</option>
                      <option class="" value="4000000">40 Lacs</option>
                      <option class="" value="5000000">50 Lacs</option>
                      <option class="" value="6000000">60 Lacs</option>
                      <option class="" value="7500000">75 Lacs</option>
                      <option class="" value="9000000">90 Lacs</option>
                      <option class="" value="10000000">1 Crore</option>
                      <option class="" value="15000000">1.5 Crores</option>
                      <option class="" value="20000000">2 Crores</option>
                      <option class="" value="30000000">3 Crores</option>
                      <option class="" value="50000000">5 Crores</option>
                      <option class="" value="100000000">10 Crores</option>
                      <option class="" value="200000000">20 Crores</option>
                      <option class="" value="300000000">30 Crores</option>
                      <option class="" value="400000000">40 Crores</option>
                      <option class="" value="500000000">50 Crores</option>
                      <option class="" value="600000000">60 Crores</option>
                      <option class="" value="700000000">70 Crores</option>
                      <option class="" value="800000000">80 Crores</option>
                      <option class="" value="900000000">90 Crores</option>
                      <option class="" value="1000000000">100 Crores</option>
                      <option class="" value="28">100+ Crores</option>
                      <option class="" value="99">On Request</option>
                    </select></td>
                <td width="110px"><select name="select3" class="tb112" id="select3" style=" Height:20px; width:100px;">
                    <option value="-1">Max</option>
                    <option class="" value="1">Below 5 Lacs</option>
                    <option class="" value="500000">5 Lacs</option>
                    <option class="" value="1000000">10 Lacs</option>
                    <option class="" value="1500000">15 Lacs</option>
                    <option class="" value="2000000">20 Lacs</option>
                    <option class="" value="2500000">25 Lacs</option>
                    <option class="" value="3000000">30 Lacs</option>
                    <option class="" value="4000000">40 Lacs</option>
                    <option class="" value="5000000">50 Lacs</option>
                    <option class="" value="6000000">60 Lacs</option>
                    <option class="" value="7500000">75 Lacs</option>
                    <option class="" value="9000000">90 Lacs</option>
                    <option class="" value="10000000">1 Crore</option>
                    <option class="" value="15000000">1.5 Crores</option>
                    <option class="" value="20000000">2 Crores</option>
                    <option class="" value="30000000">3 Crores</option>
                    <option class="" value="50000000">5 Crores</option>
                    <option class="" value="100000000">10 Crores</option>
                    <option class="" value="200000000">20 Crores</option>
                    <option class="" value="300000000">30 Crores</option>
                    <option class="" value="400000000">40 Crores</option>
                    <option class="" value="500000000">50 Crores</option>
                    <option class="" value="600000000">60 Crores</option>
                    <option class="" value="700000000">70 Crores</option>
                    <option class="" value="800000000">80 Crores</option>
                    <option class="" value="900000000">90 Crores</option>
                    <option class="" value="1000000000">100 Crores</option>
                    <option class="" value="28">100+ Crores</option>
                    <option class="" value="99">On Request</option>
                  </select>                </td>
                <td width="100px">      <select name="BedRooms" class="tb112" style="height: 20px; width:90%;">
                          <optgroup label="Numbers Of Bedrroms" disabled="disabled"></optgroup>
                          <option class="" value="-1">--Select--</option>
                          <option class="" value="1">1</option>
                          <option class="" value="2"> 2</option>
                          <option class="" value="3">3</option>
                          <option class="" value="4">4</option>
                          <option class="" value="5">5</option>
                          <option class="" value="6">6</option>
                          <option class="" value="7">7</option>
                          <option class="" value="8">8</option>
                          <option class="" value="9">9</option>
                          <option class="" value="10">9+</option>
                        </select>                </td>

                <td>
                    <select name="city1" class="tb112" style="height: 20px; width:90%;">
                        <option selected="selected" value="0">Select</option>
                        <option class="boldclass" value="12">Mumbai (All)</option>
                        <option class="" value="14">Central Mumbai suburbs</option>
                        <option class="" value="275">Mira Road And Beyond</option>
                        <option class="" value="218">Mumbai Andheri-Dahisar</option>
                        <option class="" value="274">Mumbai Beyond Thane</option>
                        <option class="" value="13">Mumbai Harbour</option>
                        <option class="" value="15">Mumbai Navi</option>
                        <option class="" value="18">Mumbai Others</option>
                        <option class="" value="16">Mumbai South</option>
                        <option class="" value="17">Mumbai South West</option>
                        <option class="" value="219">Mumbai Thane</option>
                  </select>             </td>
                    <td width="150px">
                    <input type="submit"  class="bgf"  value="Search" id="btnsearch" />             </td>
              </tr>
            </table>
            </form>

【问题讨论】：

我希望你了解 Ajax。
如果您需要更新页面的一部分而不重新加载整个页面，那么您肯定需要 AJAX。有很多东西要学。您为什么不查看 w3schools 的教程。
我对 ajax 有所了解。
我也在网上找到，但还没有得到任何合适的代码
不要试图寻找代码。努力学习，你一定会得到答案。

标签： php jquery mysql ajax search

【解决方案1】：

您可以尝试这种方法。不过这只是一个粗略的描述，你将不得不付出你的努力。正如你所说，你有一个 AJAX 的想法，所以你可以理解这一点。如需更多 AJAX 详细信息，请访问 w3schools。

每当用户点击提交按钮时调用一个 javaScript 函数形式。例如：

搜索
编写您的 javascript 函数，以便您可以获取所有领域。例如：

var s = document.getElementById("IDWillGoHere").value;
获得值后，使用 AJAX 与服务器端通信脚本并发送所有变量。例如：

object.send("identifier=search&var1="+var1+"&var2="+var2+"&var3="+var3);

这里假定标识符是变量，用于告诉服务器正在发送的信息类型。
它是可选的。如果您将请求发送到具有许多
的 php 页面，则它是必需的响应脚本。
在服务器端，您可以编写脚本来获取发送的变量通过 AJAX。例如：
```
if ($_POST['identifier']=="search" )
```
{

清理和验证变量。

执行数据库操作（SQL、NOSQL 等）以获取所需信息。

现在假设你得到了几个变量作为结果 v1、v2、v3、v4........ 等等，用你个人定义的分隔符（可能是 ~、@ 等）从这些变量中创建一个变量，例如：

$output = v1."~".v2."~".v3 ......... 以此类推；

然后使用json编码并发送到客户端。例如：

echo json_encode("$output");

退出();

}
通过 AJAX 接收服务器端脚本发送的数据。为了示例：

var r = eval("(" + object.responseText + ")"); // 这将解码 json 编码
服务器端输出。
然后根据你定义的分隔符拆分接收到的变量（这里是〜）。例如：

var rs=r.split("~");
现在您知道服务器端脚本发送了多少变量，所以你可以得到所有的。例如：

var v1=rs[0]; 变量 v2=rs[1];等等
然后相应地显示变量 v1、v2 等。例如：

document.getElementById('IDWillGoHere').innerHTML="var1";

【讨论】：

忘了说，尽量发送和接收最少的信息以加快加载速度:)。