javascript – 使搜索功能ajax

您好我正在尝试在我的项目中创建一个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);
        });
    }
}

索引的代码片段

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

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

我试图弄清楚哪个是使这个功能正常运行的最佳方法.任何提示将不胜感激,提前谢谢

解决方法:

防止默认提交事件

的onsubmit = “readRecords(这)”

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);
        });
    }
}