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

Question

我想在不刷新整个页面的情况下进行实时搜索。我是 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>

score 2 · Accepted Answer

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

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

<button id="Search" class="Style" onclick="Search()">搜索</button>
编写您的 javascript 函数，以便您可以获取所有字段的值。例如：

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

object.send("标识符=搜索&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("~");
现在您知道服务器端脚本发送了多少变量，因此您可以获取所有变量。例如：

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

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

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

1 回答 1

Related

Reference