如何在不刷新页面的情况下获得搜索结果
如何在不刷新页面的情况下获得搜索结果
提问于 2013-11-08 13:14:38
我想在不刷新整个页面的情况下进行实时搜索。我是ajax jquery.see中的新手
当我们点击搜索按钮时，我想根据它来过滤结果，而不是刷新整个页面，而不是刷新整个页面，这些参数是通过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>回答 1
Stack Overflow用户
发布于 2013-11-08 15:13:06
您可以尝试这种方法。然而，这只是一个粗略的描述，你必须付出你的努力。正如您所说的，您有一个想法AJAX，所以您可以理解这一点。有关AJAX的更多详细信息，请访问w3schools。
每当用户单击表单的提交按钮时，
- 都会调用javaScript函数。例如：
Search
- 编写javascript函数，这样就可以获得所有字段的值。例如：
var s= document.getElementById("IDWillGoHere").value;
- Once获得值后，使用AJAX与服务器端脚本通信并发送所有变量。例如：
object.send ("identifier=search&var1="+var1+"&var2="+var2+"&var3="+var3)；
这里假定identifier是一个变量，用来告诉服务器正在发送的信息类型。
这是可选的。如果您正在向php页面发送请求，则这是必需的。
响应脚本。
- 在服务器端，您可以编写脚本来获取通过AJAX发送的变量。例如：
if ($_POST‘’identifier‘==“搜索”)
{
清理并验证变量。
执行数据库操作(SQL、NOSQL等)以获取所需的信息。
现在假设你得到了几个变量，结果是v1，v2，v3，v4......等，使用您个人定义的分隔符(可能是~、@等)从这些变量中创建一个变量，例如：
$output =v1。“~”.v2。“~”.v3 .........以此类推；
然后使用json进行编码，并发送到客户端。例如：
echo json_encode ("$output")；
exit()；
}
- 通过AJAX接收服务器端脚本发送的数据。例如：
var r= eval("(“+ object.responseText + ")")；//这将解码json编码的
服务器端输出。然后，
- 根据您定义的分隔符(这里是它的~)拆分收到的变量。例如：
var rs=r.split("~");
- Now，因为您知道服务器端脚本发送了多少个变量，所以您可以获得所有这些变量。例如：
var v1=rs；var v2=rs1；依此类推，然后
- 会相应地显示变量v1、v2等。例如：
document.getElementById('IDWillGoHere').innerHTML="var1";
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19852071
复制相关文章
相似问题
腾讯云开发者
