使用ajax在按钮上调用php函数然后刷新

时间:2016-11-14 22:38:52

标签: javascript php html ajax mysqli

我正在尝试为mysql数据库创建搜索页面。我正在尝试使用“下一个”和“上一个”按钮来循环,但搜索结果一次只能得到一个结果。我知道ajax是最好的方法。 我对ajax知之甚少。我现在刚刚开始使用PHP。 我在这里搜索过但找不到我想要做的事情。我也读过W3的ajax部分,它没有帮助解决这个问题。

我有它,以便用户搜索项目(创建一个mysql查询),搜索结果一次只输出一个结果。如何获取它,以便按下“下一步”按钮时显示下一个结果。同样对于Prev按钮。

我试过让if和while语句工作,但它似乎不断回到客户端到服务器问题。

我正在考虑使用PHP变量来表示每个搜索结果,并让按钮增加/减少变量编号,并告诉页面使用新变量重新显示信息。

任何帮助都会很棒。我已经坚持了一个多星期了 代码示例会更有帮助。

1 个答案:

答案 0 :(得分:0)

我会这样做:

一个搜索请求-ajax-到服务器并且服务器使用JSON格式的数组响应您要导航的结果通过下一个和上一个按钮抛出它们,通过执行一个搜索请求,您将避免每次下一次和上一次点击都会向服务器发出许多请求,同时也避免服务器跟踪当前结果。

客户端 - Javascript和JQuery

<?php
    include '_database/database.php';
    session_start();
    $current_user = $_SESSION['user_username'];
    $sql = "SELECT * FROM users order by user_id desc";
    $result = mysqli_query($database,$sql) or die(mysqli_error($database));
?>

<div class="container" style="width: 200px;">
    <?php while($rw = mysqli_fetch_array($result)){ ?>
        <div class="user" style="width: 100px; float: left;">
            <img src="userfiles/avatars/<?php echo $rw['user_avatar'];?>" width="100" height="100">
            <div class="userInfo">
                <?php echo $rw['user_country'] . ' ' . $rw['user_username'];?><br>
                <?php echo $rw['user_joindate'];?><br>
                <!--Content--><br>
                <!--Content--><br>
                <!--Content--><br>
                <a href="<!--Link-->">See more</a>
            </div>
       </div>
   <?php } ?>
</div>

客户端 - HTML

enter image description here

<script>
var results; // the results array that will have all your search results
var currentresult = 0; // the index of the current result
//the search ajax function
function buttonSearchPressed(){
    $.ajax({type:"POST",url:"test.php",
        data:{keyword:$('input#searchkeyword')[0].value}
        success:function(data){
                try{results = JSON.parse(data)}catch(e){alert('error');}    
        }
    });
}
function previous(){
    if(currentresult>0){
        currentresult--;
        $('span#result')[0].innerHTML =results[currentresult];
    }
}
function next(){
    if(currentresult<results.length-1){
         currentresult++;
         $('span#result')[0].innerHTML =results[currentresult];
     }
}
</script>

服务器端 - PHP test.php

<input id="searchkeyword">
<button onclick="buttonSearchPressed()">search</button><br>
<button onclick="previous()">previous</button>
<span id='result'></span>
<button onclick="next()">next</button>