使搜索功能ajax

Question

您好，我正在尝试在我的项目中创建一个 ajax 搜索功能。

应用程序首先将所有客户数据加载到网页上的表格中。 如果在搜索栏上输入了某些内容， 我希望显示搜索到的数据而不是所有客户数据。

我尝试了各种方法，但都没有达到我的预期。

首先我添加了一个函数来检查它在搜索栏中是否有任何值，如果它有任何值，它将尝试在数据库中查找并获取数据。但如果它没有任何值，它将默认显示所有客户端数据。

这是我的示例脚本代码

// READ records
function readRecords() {
    var searchbar = $("#search").val();
    
    if (searchbar.val() > 0) {
        $.post("ajax/search.php", {
            searchbar: searchbar
        }, function (data, status) {
        $(".records_content").html(data);
        }); 
    } else {
        $.get("ajax/readRecords.php", {}, function (data, status) {
        $(".records_content").html(data);
        });
    }
}

索引的代码 sn-p

<!-- Content Section -->
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Client List</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="pull-xs-right">
                <button class="btn btn-success" data-toggle="modal" data-target="#add_new_record_modal">Add New Client</button>
            </div>
            <div class="col-sm-3">
                <form class="form-inline global-search" role="form" method="POST" onsubmit="readRecords()">
                    <div class="form-group">
                        <input type="text" class="form-control" id="search"  placeholder="Search">
                        <button type="submit" id="search" class="btn btn-primary">Search</button>
                    </div>
                </form>
            </div>
            
        </div>
    </div>
    <div class="row">
        <div class ="col-lg-12">
            <!--Where the results will be printed-->
            <div class="records_content"></div>
        </div>
    </div>
</div>

search.php

<?php 
    if(isset($_POST['search']) && isset($_POST['search']) != "") {
    // include Database connection file  
    include("SQLFunctions.php"); 

    // Design initial table header  
    $data = '<table class="table table-bordered"> 
                        <tr> 
                            <th>No.</th> 
                            <th>Surname</th> 
                            <th>Name</th> 
                            <th>Address</th> 
                            <th>Telephone</th> 
                            <th>Inspection</th> 
                            <th>Model</th> 
                            <th>Serial Number</th> 
                            <th>Notes</th> 
                            <th>A/S Request</th>
                            <th>Update</th> 
                            <th>Delete</th> 
                        </tr>'; 
    
    $search = $_POST['search'];
    
    $searchquery = "SELECT Surname
                ,Name
                ,Address
                ,Telephone
                ,DATE_FORMAT(PurchaseDate, '%Y-%m-%d')
                ,Model
                ,SerialNumber
                ,Notes
                FROM Clients
                WHERE Surname LIKE '%".$search."%' OR Name LIKE '%".$search."%' OR Model Like '%".$search."%'";
    
    $link = connectDB();

    ;
    
    // if query results contains rows then fetch those rows  
    if($result = mysqli_query($link, $searchquery)) 
    { 
        $number = 1; 
        while($row = mysqli_fetch_assoc($result)) 
        { 
            $data .= '<tr> 
                <td>'.$number.'</td> 
                <td>'.$row['Surname'].'</td> 
                <td>'.$row['Name'].'</td> 
                <td>'.$row['Address'].'</td> 
                <td>'.$row['Telephone'].'</td> 
                <td>'.$row['PurchaseDate'].'</td> 
                <td>'.$row['Model'].'</td> 
                <td>'.$row['SerialNumber'].'</td> 
                <td>'.$row['Notes'].'</td> 
                <td> 
                    <button onclick="Request('.$row['id'].')" class="btn btn-primary">A/S Request</button> 
                </td>
                <td> 
                    <button onclick="GetUserDetails('.$row['id'].')" class="btn btn-warning">Update</button> 
                </td> 
                <td> 
                    <button onclick="DeleteUser('.$row['id'].')" class="btn btn-danger">Delete</button> 
                </td> 
            </tr>'; 
            $number++; 
        } 
    } 
    else 
    { 
        // records now found  
        $data .= '<tr><td colspan="6">Records not found!</td></tr>'; 
    } 

    $data .= '</table>'; 

    echo $data;
    }
?> 

当我运行这个项目时，一切正常，但是当我在搜索栏中输入任何值时，它会给出相同的所有客户端结果。

我正在尝试找出使该功能发挥作用的最佳方法。任何提示将不胜感激提前谢谢您

Answer 1

防止默认提交事件

onsubmit="readRecords(this)"

function readRecords(e) {
    e.preventDefault();
    var searchbar = $("#search").val();

    if (searchbar.val() > 0) {
        $.post("ajax/search.php", {
            searchbar: searchbar
        }, function (data, status) {
        $(".records_content").html(data);
        }); 
    } else {
        $.get("ajax/readRecords.php", {}, function (data, status) {
        $(".records_content").html(data);
        });
    }
}

Answer 2

在调用ajax请求之前使用jquery的event.preventDefault()方法。

如果调用此方法，则不会触发事件的默认动作。