在点击时使用ajax向php传递ID名称 [英] passing id name on click using ajax to php

问题描述

我正在使用Ajax制作过滤的搜索系统.我有三个不同的标签，用户可以在其中按名称，类别和位置进行搜索. 当用户在搜索框(标签1)中输入名称时，我可以进行搜索. 在第二个选项卡中，如何使用相同的Ajax，因此当用户单击链接时，该ID在Ajax脚本中传递给我的php，并且该ID作为varibale在我的mysql查询中传递.

i am using Ajax to make a filtered search system. I have three different tabs where users can search by names, by category and location. I am able to seacrh when user enters name in the search box(tab-1). In second tab, how can I use the same Ajax, so when user clicks a link, the id is passed in the ajax script to my php, and that id is passed as varibale in my mysql query.

第一次使用Ajax，我们将不胜感激.

First time with Ajax, any help would be highly appreciated.

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:

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

推荐答案

您说要在单击链接时传递ID，但是您没有任何处理链接点击的代码.添加链接的点击处理程序，并修改search_ajax_way()以接受单击链接时的可选ID:

You say you want to pass the id when a link is clicked, but you don't have any code that handles link clicks. Add a click handler for links, and modify search_ajax_way() to accept an optional id for when links are clicked:

$("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']

The id will be available in PHP as $_POST['clickedId']

实际上，我将重构为使用search_ajax_way()作为事件处理程序，而不是从匿名事件处理程序中调用它:

Actually, I'd refactor to use search_ajax_way() as the event handler, rather than calling it from an anonymous event handler:

$("#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);
    })
}

这篇关于在点击时使用ajax向php传递ID名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！