0

私はAjaxを使用してフィルター処理された検索システムを作成しています。ユーザーが名前、カテゴリ、場所で検索できる3つの異なるタブがあります。ユーザーが検索ボックス（tab-1）に名前を入力すると検索できます。2番目のタブでは、同じAjaxをどのように使用できますか？ユーザーがリンクをクリックすると、IDがajaxスクリプトで私のphpに渡され、そのIDが私のmysqlクエリでvaribaleとして渡されます。

初めてAjaxを使用する場合は、ご協力いただければ幸いです。

AJAXスクリプト：

$(document).ready(function () {
    $("#search_results").slideUp();
    $("#button_find").click(function (event) {
        event.preventDefault();
        search_ajax_way();
    });
    $("#search_query").keyup(function (event) {
        event.preventDefault();
        search_ajax_way();
    });
});

function search_ajax_way() {
    $("#search_results").show();
    var search_this = $("#search_query").val();
    $.post("search.php", {
        searchit: search_this
    }, function (data) {
        $("#display_results").html(data);
    })
}

html：

<form id="searchform" method="post">
    <input id="search_query" name="search_query" placeholder="What You Are Looking For?"   
        size="50" type="text" />
    <input id="button_find" value="Search" type="submit" />
</form>
<div id="display_results">
</div>

<div class="tab">
    <input id="tab-2" name="tab-group-1" type="radio" />
    <label for="tab-2">Search by Category</label>
    <div class="content">
        <div id="searchbycategory">
            <div id="nav_1_a">      
                <ul>
                    <li><a href="#">All Categories</a></li>
                    <li><a href="#" id="dummy">Category-1</a></li>
                    <li><a href="#">Category-2</a></li>
                    <li><a href="#">Category-3</a></li>
                </ul>
                <div id="display_results">
                </div>
            </div>
            <!-- END nav_1_a -->
        </div>
    </div>
</div>
<div class="tab">
    <input id="tab-3" name="tab-group-1" type="radio" />
    <label for="tab-3">Search by location</label>
    <div class="content">
        <div id="searchbylocation">
            <div id="nav_1_a">      
                <ul>
                    <li><a href="#">All</a></li>
                    <li><a href="#">Location-1</a></li>
                    <li><a href="#">Location-2</a></li>
                    <li><a href="#">Location-3</a></li>
                    <li><a href="#">Location-4</a></li>
                </ul>
            </div>

search.php：

<?php
$connection = mysql_connect('localhost', 'user', 'pwd');
$db = mysql_select_db('db', $connection);
$term = strip_tags(substr($_POST['searchit'],0, 100));
$term = mysql_escape_string($term); 
echo "Enter name to search";
else{
$sql = mysql_query("select col1,col2 from tab2 where tab2.somecolm like 
  '{$term}%'", $connection);

 echo "<ul>";
if (mysql_num_rows($sql)){
while($info = mysql_fetch_array($sql, MYSQL_ASSOC ) ) {
echo "<li>";
    echo "<a href=\"http://" . $info['col1'] . ".html\">" . $info['col2'] . "</a>";
    echo "</li>";
}

}else{
echo "No matches found!";
}

echo "</ul>";
}
?>
4

2 に答える 2

2

search_ajax_wayブロックIDを関数 に渡します：

$("#search_query").keyup(function(event){
    event.preventDefault();
    search_ajax_way(this.id);
});

次に、ajaxリクエストのデータパラメータでブロックIDを渡します。

function search_ajax_way(blockId){
   $("#search_results").show();
   var search_this=$("#search_query").val();
   $.post("search.php", {searchit : search_this, 'blockId': blockId}, function(data){
      $("#display_results").html(data);

   })
}

これで、blockIdがphpスクリプトでとして使用できるようになります$_POST['blockId']。

于 2013-01-30T17:27:51.803 に答える
0

リンクがクリックされたときにIDを渡したいと言いますが、リンクのクリックを処理するコードがありません。リンクのクリックハンドラーを追加し、search_ajax_way()リンクがクリックされたときにオプションのIDを受け入れるように変更します。

$("a").click(function (event) {
    event.preventDefault();
    search_ajax_way(this.id);
});

function search_ajax_way(clickedId) {
    $("#search_results").show();
    var postData = { searchit: $("#search_query").val() };
    if (clickedId) {
        postData.clickedId = clickedId;
    }
    $.post("search.php", postData, function (data) {
        $("#display_results").html(data);
    })
}

IDはPHPで次のように利用可能になります$_POST['clickedId']

編集：search_ajax_way()実際には、匿名のイベントハンドラーから呼び出すのではなく、イベントハンドラーとして使用するようにリファクタリングします。

$("#button_find,a").click(search_ajax_way);
$("#search_query").keyup(search_ajax_way);

function search_ajax_way(event) {
    event.preventDefault();
    $("#search_results").show();
    var postData = {
        searchit: $("#search_query").val(),
        clickedId: this.id
    };
    $.post("search.php", postData, function (data) {
        $("#display_results").html(data);
    })
}
于 2013-01-30T18:33:15.290 に答える