php - ページを更新せずに検索結果を取得する方法

Question

ページ全体を更新せずにライブ検索を行いたい.私はajax jqueryが初めてです.この画像を参照してください

ここに画像の説明を入力

検索ボタンをクリックすると、AJAX Jquery を使用した 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>

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 ("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]; var v2=rs[1]; 等々
次に、それに応じて変数 v1、v2 などを表示します。例えば：

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

php - ページを更新せずに検索結果を取得する方法

1 に答える 1

Related

Reference