使用 AJAX 在单击时将 ID 名称传递给 PHP - passing id name on click using ajax to php

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

第一次使用阿贾克斯，任何帮助将不胜感激。

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

将块 id 传递给search_ajax_way函数：

$("#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 将作为$_POST['blockId']在您的 php 脚本中可用。

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