使用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>

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

Answer 1

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

Answer 2

将块id传递给search_ajax_way函数：

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

然后在ajax请求的data param中传入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);

   })
}

现在，在你的php脚本中，blockId将作为$_POST['blockId']可用。