使用 ajax 在点击时将 id 名称传递给 php

Question

我正在使用 Ajax 来制作过滤搜索系统。我有三个不同的选项卡，用户可以在其中按名称、类别和位置进行搜索。 当用户在搜索框（tab-1）中输入名称时，我可以搜索。 在第二个选项卡中，我如何使用相同的 Ajax，所以当用户单击链接时，id 会在 ajax 脚本中传递给我的 php，并且该 id 在我的 mysql 查询中作为变量传递。

第一次使用 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>

搜索.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>";
}
?>

Answer 1

将块ID传递给search_ajax_way函数：

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

然后在ajax请求的数据参数中传递block 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'] 可用。

Answer 2

您说您想在点击链接时传递 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);
    })
}