Javascript 从数据库加载更多状态_Javascript_Php_Jquery_Ajax

Javascript 从数据库加载更多状态

javascript php jquery ajax

Javascript 从数据库加载更多状态,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,你好我想在feed底部创建一个“loadmorestatus”按钮，你可以从代码中看到，我已经设置了20篇文章的限制我要找的是一个Jquery或javascript函数（可能是AJAX），用于更改 $statusQ = "SELECT * FROM `status` order by id desc LIMIT 20"; 到我只想更改限制并刷新对服务器的请求，而不更新HTML、javascript和CSS 有什么好办法可以做到这一点吗请注意，我在谷歌上搜索了很多，我只找到了一些不太适

你好我想在feed底部创建一个“loadmorestatus”按钮，你可以从代码中看到，我已经设置了20篇文章的限制

我要找的是 一个Jquery或javascript函数（可能是AJAX），用于更改

$statusQ = "SELECT * FROM `status` order by id desc LIMIT 20";

到

我只想更改限制并刷新对服务器的请求，而不更新HTML、javascript和CSS

有什么好办法可以做到这一点吗

请注意，我在谷歌上搜索了很多，我只找到了一些不太适合我的代码的例子

<?php
    $statusQ = "SELECT * FROM `status` order by id desc LIMIT 20";
    $how_meny_rows = mysqli_query($mysqli, "SELECT * FROM `status`");
    $row_cnt = mysqli_num_rows($how_meny_rows);
    $statusA = mysqli_query($mysqli,$statusQ);

    while ($row = mysqli_fetch_array($statusA)){

      echo '<div class="statusholder">
                <div class="status-img">
                    <img src="' . $row['Bild'] . '"/>
                </div>
                <div class="this-status">
                    <h4 class="status-who">'. $row['user'] .'</h4>
                    <p class="status">' .$row['status']. '</p>
                    <a class="status-like" href="javascript" onclick""> Gilla</a>
                    <p class="num_like comingsoon">' . $row['like'] . '</p>
                    <a class="status-comment" href="javascript" onclick"">Kommentera detta</a>
                    <p class="status-timestamp">' . $row['timestamp'] . '</p>

                </div>
            </div>';


    }
    if ($row_cnt > 20) {
        echo '<div class="loadstatus">
                <a href="javascript:void(0);" onclick="" class="comingsoon"> klicka för att ladda flerstatusar </a>     </div>';
    } 
    ?>

将查询移动到一个单独的php文件中，并使用jquery的Ajax功能调用包含所需限制值的php文件。不过这有点冒险。如果我是你，我会阅读PDO和准备好的语句。

将查询移动到一个单独的php文件中，并使用干净的get输入进行查询imit然后使用jquery的Ajax功能调用php文件，其中包含您需要的限制值。这有点冒险。如果我是您，我会阅读PDO和准备好的语句。

您可以向输出另外20个提要的php脚本发出jquery

post

请求，然后在当前页面中显示结果。下面是例如：

<script>
$(document).ready(function() {
    $("#loadMoreButton").clicked(function() {
        $.post(
            "anotherPage.php",
            { dummy: "" },
            function(returnedData) {
                $("#loadMoreButton").before(returnedData);
                }
            );
        });
    });
</script>

但是，您应该传递显示的最新帖子的

id

，然后只加载之后的帖子，而不是重新加载帖子

编辑：感谢@NorthBridge指出了一种简单的方法（见他的评论）

：）

您可以向输出另外20个提要的PHP脚本发出jQuery

post

请求，然后在当前页面中显示结果。以下是一个示例：

<script>
$(document).ready(function() {
    $("#loadMoreButton").clicked(function() {
        $.post(
            "anotherPage.php",
            { dummy: "" },
            function(returnedData) {
                $("#loadMoreButton").before(returnedData);
                }
            );
        });
    });
</script>

但是，您应该传递显示的最新帖子的

id

，然后只加载之后的帖子，而不是重新加载帖子

编辑：感谢@NorthBridge指出了一种简单的方法（参见他的评论）

：）

使用jQuery Ajax可以实现“加载更多”功能

在主页中加载前20条状态记录&单击

comingsoon

链接，使用jQuery

$.ajax

方法调用另一个页面

moreResults.php

在

moreResults.php

页面中，根据限制获取正确的结果。限制值将使用'qry\u limit'js变量传递到

moreResults.php

此值将从

qry\u limit

隐藏变量中检索。成功后，将加载的结果附加到

statusDiv

div&更新限制值以加载下一组记录

试试这个

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type"text/javascript">
$(document).ready(function(){
    $('a.comingsoon').click(function () {
        var qry_limit = $("#qry_limit").val();

            $.ajax({
                type: "POST",
                url: "moreResults.php",
                data: "limit="+qry_limit,
                cache: false,
                success: function(responseData){
                    var newLimit=qry_limit+20;
                    $("div#statusDiv").append(responseData);
                    $("#qry_limit").val(newLimit); 
                }
            });


        return false;
    });
});
</script>
</head>
<body>
<?php

    $statusQ = "SELECT * FROM `status` order by id desc LIMIT 0,20";
    $how_meny_rows = mysql_query($mysqli, "SELECT * FROM `status`");
    $row_cnt = mysqli_num_rows($how_meny_rows);
    $statusA = mysql_query($mysqli,$statusQ);
     echo '<div id="statusDiv">';
    while ($row = mysqli_fetch_array($statusA)){

      echo '<div class="statusholder">
                <div class="status-img">
                    <img src="' . $row['Bild'] . '"/>
                </div>
                <div class="this-status">
                    <h4 class="status-who">'. $row['user'] .'</h4>
                    <p class="status">' .$row['status']. '</p>
                    <a class="status-like" href="javascript" onclick""> Gilla</a>
                    <p class="num_like comingsoon">' . $row['like'] . '</p>
                    <a class="status-comment" href="javascript" onclick"">Kommentera detta</a>
                    <p class="status-timestamp">' . $row['timestamp'] . '</p>

                </div>
            </div>';


    }
    echo '</div>';
    if ($row_cnt > 20) {
        echo '<div class="loadstatus">
                <a href="javascript:void(0);" onclick="" class="comingsoon"> klicka för att ladda flerstatusar </a>     </div>';
    } 
    ?>
    <input type="hidden" name="qry_limit" id="qry_limit" value="20"/>
    <input type="hidden" name="total_results" id="total_results" value="<?php echo $row_cnt; ?>"/>
    </body>
    </html>


$（文档）.ready（函数（）{
$（'a.comingsoon'）。单击（函数（）{
var qry_limit=$（“#qry_limit”）.val（）；
$.ajax({
类型：“POST”，
url:“moreResults.php”，
数据：“限制=”+qry_限制，
cache:false，
成功：功能（responseData）{
var newLimit=qry_limit+20；
$（“div#statusDiv”）.append（responseData）；
美元（“#qry#u限额”）.val（新限额）；
}
});
返回false；
});
});

使用jQuery Ajax可以实现“加载更多”功能

在主页中加载前20条状态记录&单击

comingsoon

链接，使用jQuery

$.ajax

方法调用另一个页面

moreResults.php

在

moreResults.php

页面中，根据限制获取正确的结果。限制值将使用'qry\u limit'js变量传递到

moreResults.php

此值将从

qry\u limit

隐藏变量中检索。成功后，将加载的结果附加到

statusDiv

div&更新限制值以加载下一组记录

试试这个

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type"text/javascript">
$(document).ready(function(){
    $('a.comingsoon').click(function () {
        var qry_limit = $("#qry_limit").val();

            $.ajax({
                type: "POST",
                url: "moreResults.php",
                data: "limit="+qry_limit,
                cache: false,
                success: function(responseData){
                    var newLimit=qry_limit+20;
                    $("div#statusDiv").append(responseData);
                    $("#qry_limit").val(newLimit); 
                }
            });


        return false;
    });
});
</script>
</head>
<body>
<?php

    $statusQ = "SELECT * FROM `status` order by id desc LIMIT 0,20";
    $how_meny_rows = mysql_query($mysqli, "SELECT * FROM `status`");
    $row_cnt = mysqli_num_rows($how_meny_rows);
    $statusA = mysql_query($mysqli,$statusQ);
     echo '<div id="statusDiv">';
    while ($row = mysqli_fetch_array($statusA)){

      echo '<div class="statusholder">
                <div class="status-img">
                    <img src="' . $row['Bild'] . '"/>
                </div>
                <div class="this-status">
                    <h4 class="status-who">'. $row['user'] .'</h4>
                    <p class="status">' .$row['status']. '</p>
                    <a class="status-like" href="javascript" onclick""> Gilla</a>
                    <p class="num_like comingsoon">' . $row['like'] . '</p>
                    <a class="status-comment" href="javascript" onclick"">Kommentera detta</a>
                    <p class="status-timestamp">' . $row['timestamp'] . '</p>

                </div>
            </div>';


    }
    echo '</div>';
    if ($row_cnt > 20) {
        echo '<div class="loadstatus">
                <a href="javascript:void(0);" onclick="" class="comingsoon"> klicka för att ladda flerstatusar </a>     </div>';
    } 
    ?>
    <input type="hidden" name="qry_limit" id="qry_limit" value="20"/>
    <input type="hidden" name="total_results" id="total_results" value="<?php echo $row_cnt; ?>"/>
    </body>
    </html>


$（文档）.ready（函数（）{
$（'a.comingsoon'）。单击（函数（）{
var qry_limit=$（“#qry_limit”）.val（）；
$.ajax({
类型：“POST”，
url:“moreResults.php”，
数据：“限制=”+qry_限制，
cache:false，
成功：功能（responseData）{
var newLimit=qry_limit+20；
$（“div#statusDiv”）.append（responseData）；
美元（“#qry#u限额”）.val（新限额）；
}
});
返回false；
});
});

在Jesons awnser上编辑

您必须添加此代码

'qry_limit = parseInt(qry_limit);'

要将您的qry_限制值转换为Int而不是字符串，请在Jesons awnser上编辑

您必须添加此代码

'qry_limit = parseInt(qry_limit);'

要将您的qry_limit值转换为Int而不是字符串

提示：将limit子句更改为：

limit 0，20

然后将0移动到变量（它是一个偏移量），当您需要更多结果时，通过Ajax向脚本发送x*个您想要的项目，然后只附加输出。这种方法需要编写Ajax请求和管理它的PHP代码，这属于“HTML/Javascript更新”类别提示：将LIMIT子句更改为：

LIMIT 0，20

然后移动t他将0转换为一个变量（这是一个偏移量），当您需要更多结果时，通过Ajax向脚本发送x*个您想要的项目，然后添加输出。这种方法需要编写Ajax请求和管理它的PHP代码，这属于“HTML/Javascript更新”类别，谢谢！非常有帮助，让我更了解Ajax再次，非常感谢Jenson M John。我尝试了你的解决方案，它工作得很顺利！谢谢你们！非常有帮助的awnser，让我对AJAX有了更多的了解，非常感谢Jenson M John。我尝试了你的解决方案，它工作得很好，没有公关

'qry_limit = parseInt(qry_limit);'