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

Question

我想进行实时搜索而不刷新整个页面。我是ajax jquery中的新手。查看此图片

在此处输入图片说明

当我们单击搜索按钮时，我希望基于该结果过滤结果，而不用使用AJAX Jquery通过PHP MySQL通过PHP MySQL的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>

Answer 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进行编码并将其发送到客户端。例如：
回声json_encode（“ $ output”）;
出口（）;
}
通过AJAX从服务器端脚本接收发送的数据。例如：
var r = eval（“（” + object.responseText +“）”）; //这将解码编码的json
服务器端输出。
然后根据定义的分隔符（此处为〜）拆分接收到的变量。例如：
var rs = r.split（“〜”）;
现在，您知道服务器端脚本发送了多少个变量，因此您可以获取所有变量。例如：
var v1 = rs [0]; var v2 = rs [1]; 等等
然后相应地显示变量v1，v2等。例如：
document.getElementById（'IDWillGoHere'）。innerHTML =“ var1”;

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

问题描述投票：0回答：1

1个回答

最新问题

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

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1