使用带有复选框的AJAX进行PHP搜索

时间:2016-06-10 20:36:59

标签: javascript php jquery ajax

如何让AJAX知道我用复选框检查了什么?我有一个从数据库中选择的类别列表。那么如何让AJAX知道我检查了什么?

这是我的搜索PHP:

<div class ="search-category-container">
        <div class ="search-category-header featured-header">
            <label class ="featured-font">category</label>
        </div>
        <div class ="search-category-content">
                <?php 
                $result=mysqli_query($connection,"SELECT * FROM category");
                while($row=  mysqli_fetch_array($result)) { ?>
                <label class="checkbox category-list ">
                  <input type="checkbox" name="category_list[]" value="<?php echo $row['name']; ?>" form="search-form"><?php echo $row['name']; ?>
                </label>
                <?php
                }
                ?>
        </div>
    </div>

这是我在没有AJAX之前使用搜索功能的搜索功能。现在我试图使用AJAX来获取数据,我可以使用这个函数吗?

<?php
if($filter == "post" && $time == "all" && $status == "all" && isset ($_POST['category_list'])) {
foreach ($_POST['category_list'] as $category) {
    $result = mysqli_query($connection, "SELECT * FROM category WHERE name IN ('$category')")or die(mysqli_error($connection));
    while($row=  mysqli_fetch_array($result)) {
        $getCategory = $row['id'];
        $getPostIDRow = mysqli_query($connection, "SELECT * FROM post_category WHERE category_id = '$getCategory'") or die(mysqli_error($connection));
        while($row2=  mysqli_fetch_array($getPostIDRow)) {
            $getPostID = $row2['post_id'];
            $result2 = mysqli_query($connection,"SELECT * FROM post WHERE title LIKE '%$search%' AND id = '$getPostID'") or die(mysqli_error($connection));
            $count2 = mysqli_num_rows($result2);

if($count2>0) {
    while($row2= mysqli_fetch_array($result2)) {
        $postID = $row2['id'];
        $result3 = mysqli_query($connection, "SELECT * FROM user_post WHERE post_id = '$postID'") or die(mysqli_error($connection));
        while($row3 = mysqli_fetch_array($result3)) { 
            $getUserName = mysqli_query($connection, "SELECT * FROM user WHERE id = '".$row3['user_id']."'")or die(mysqli_error($connection));
            while($row4 = mysqli_fetch_array($getUserName)) {?>
                <div class ="post-container" id="search-container">
                    <div class ="post-header-container">
                        <div class ="post-header">
                            <a href ="post.php?id=<?php echo urlencode($row2['id']);?>&user=<?php echo $row3['user_id']; ?>">
                                <p class ="post-header-font"><?php echo ($row2['title']); ?></p>
                            </a>    
                        </div>
                        <div class ="post-user">
                            <p class ="faded-font">by : <a href="user.php?user=<?php echo $row3['user_id']; ?>"><?php echo $row4['username']; ?></a></p>
                        </div>
                    </div>
                    <div class ="post-content-container">
                        <p class ="post-content-font">
                            <?php echo ($row2['summary']); ?>
                        </p>
                    </div>
                    <div class ="post-info-container">
                        <div class ="post-info">
                            <span class ="glyphicon glyphicon-eye-open"> views: <?php echo ($row2['views']);?></span>
                        </div><div class ="post-info">
                            <span class ="glyphicon glyphicon-pencil"> answers:</span>
                        </div><div class ="post-info">
                            <span class ="glyphicon glyphicon-ok"> status: <?php echo ($row2['status']);?></span>
                        </div>
                    </div>
                </div><?php
                    }
                }
            }
        }
    }
}
}
?>

这是AJAX搜索功能

    $(document).ready(function(){
function search() {
    var searchWord = $("#search").val();
    var filter = $("#filter:checked").val();
    var time = $("#time:checked").val();
    var status = $("#status:checked").val();
        $.ajax({
            type:"post",
            url:"searchFunction.php",
            data:"search="+searchWord+"&filter="+filter+"&time="+time+"&status="+status,
            success:function(data) {
                $("#searchContainer").html(data);
                $("#search").val("");
            }
        });
}
$("#searchButton").click(function(){
    search();
});
$("#search").keyup(function(e){
    if(e.keyCode == 13) {
        search();
    }
});
});

1 个答案:

答案 0 :(得分:1)

要回答ajax问题,我强烈建议您更改代码以使用&#39;表格&#39; DOM提供用户体验和更轻松的维护,只需要fyi并使用序列化功能,它也会发送“检查”功能。复选框。

https://api.jquery.com/serialize/

function search() {

   var postData = $('myForm').serialize(); // i.e <form id="myForm">
        $.ajax({
            type:"post",
            url:"searchFunction.php",
            data: postData,
            success:function(data) {
                $("#searchContainer").html(data);
                $("#search").val("");
            }
        });
}

这将自动完成所有工作,而不必运行一堆jQuery选择调用并将HTTP查询放在一起。如果你需要知道你的ajax正在运行什么。进入浏览器的检查员模式并查找&#34; Network&#34;选项卡,单击它,您应该看到对该搜索文件的ajax调用,以及您需要知道的所有内容。 HTTP请求和响应标头是什么和正文。

请注意,确保在提交事件中返回false,并且HTML表单上的字段名称与ajax的$ _POST键名匹配。

$("#myForm").on('submit', function(){
    search();
    return false;
});
祝你好运!