如何在没有刷新页面的情况下获得搜索结果
我想在不刷新整个页面的情况下进行实时搜索。我是ajax jquery的新手。请看这个图片
当我们点击搜索按钮时，我想基于此过滤结果而不刷新整个页面，所有这些必需参数由sql查询通过PHP MySQL使用AJAX Jquery选择，如何使用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>
1 个答案:
答案 0 :(得分：1)
您可以尝试这种方法。然而，它只是一个粗略的描述，你将不得不付出努力。正如你所说，你有一个AJAX的想法，所以你可以理解这一点。有关更多AJAX详细信息，请访问w3schools。
-
每当用户点击提交按钮时调用javaScript函数 形成。例如：
＆LT; button id =＆＃34; Search＆＃34;类=＆＃34;样式和＃34; onclick =＆＃34;搜索（）＆＃34;＆gt;搜索＆lt; /按钮＆GT;
-
编写您的javascript函数，以便获取值 所有的领域。例如：
var s = document.getElementById（＆＃34; IDWillGoHere＆＃34;）。value;
-
获得值后，使用AJAX与服务器端通信 脚本并发送所有变量。例如：
object.send（＆＃34; identifier = search＆amp; var1 =＆＃34; + var1 +＆＃34;＆amp; var2 =＆＃34; + var2 +＆＃34;＆amp; var3 =＆＃34 + VAR3）;
此处标识符是假定变量，用于告知服务器正在发送的信息类型 这是可选的。如果您向多页的php页面发送请求，则需要 响应脚本。
-
在服务器端，您可以编写脚本来获取发送的变量 通过AJAX。例如：
if ($_POST['identifier']=="search" ){
清理并验证变量。
执行数据库操作（SQL，NOSQL等）以获取所需信息。
现在假设你得到几个变量作为结果v1，v2，v3，v4 ........等，用你个人定义的分隔符（可能是〜，@等）制作一个变量，例如：
$ output = v1。＆＃34;〜＆＃34; .v2。＆＃34;〜＆＃34; .v3 .........等等;
然后使用json进行编码并将其发送到客户端。例如：
echo json_encode（＆＃34; $ output＆＃34;）;
出口（）;
}
-
通过AJAX从服务器端脚本接收发送的数据。对于 例如：
var r = eval（＆＃34;（＆＃34; + object.responseText +＆＃34;）＆＃34;）; //这将解码json编码的
服务器端输出。 -
然后根据您定义的分隔符拆分接收的变量 （这里是〜）。例如：
var rs = r.split（＆＃34;〜＆＃34;）;
-
现在您知道服务器端脚本发送了多少变量， 所以你可以得到所有这些。例如：
var v1 = rs [0]; var v2 = rs [1];等等
-
然后相应地显示变量v1，v2等。例如：
的document.getElementById（＆＃39; IDWillGoHere＆＃39）。innerHTML的=＆＃34; VAR1＆＃34 ;;
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？