数据库驱动的页面内容

时间:2013-12-29 12:40:33

标签: javascript php jquery html facebook

我想在我的网站上制作一个facebook风格的墙。目标是插入表单数据,根据需要验证所有表单,并将此数据存储到数据库中。我希望同时和单独地将所有存储在此数据库中的数据发布到充当facebook墙的div中。

我似乎已经完成了从表单中存储数据。我也可以检索数据库中的所有数据,除了它只在我提交表单时才这样做。这意味着没有页面内容,除非用户提交帖子。

当用户打开页面时或之前,如何使用数据库中的行填充页面?

请帮忙!

这是我的php,它在提交html表单时存储和打印数据。

<?php
  // Create connection
  $con=mysqli_connect("localhost","root","","test");

  if (mysqli_connect_errno())
  {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }
  $sql="INSERT INTO test (school, confession)
  VALUES
  ('$_POST[school]','$_POST[confession]')";

  if (!mysqli_query($con,$sql))
  {
    die('Error: ' . mysqli_error($con));
  }
  echo "1 record added";

  //  print $_POST['college']."-<br />".$_POST['confession'];
  $result = mysqli_query($con,"SELECT * FROM test");

  while($row = mysqli_fetch_array($result))
  {
    echo "#" . $row['ID'] . " " . $row['confession'];
    echo "<br>" . "@" .$row['school'];
    echo "<br>" . "<br>";
  }

  mysqli_close($con);
?>

这是我的JS发布到一个名为content的div。

$(document).ready(function(){
  $("#subform").validate({
    submitHandler: function(form) {
      // do other stuff for a valid form
      $.post('test.php', $("#subform").serialize(), function(data) {
        $('#content').html(data);
      });
    }
  });
});

3 个答案:

答案 0 :(得分:0)

您可以使用 JavaScript计时器,它会在一定的时间间隔后打勾并加载您的数据,此外您必须编写一个只会获取test.php文件中的数据的函数< / p>

function dataLoader()
{
   //load Data with GET Request $.get(. . . );
}

dataLoader();
setInterval(dataLoader, 1000);

第二选项将使用jquery Timer Library来实现性能

答案 1 :(得分:0)

感谢您的回复,我解决了这个问题。我刚刚在加载时调用了php。

    $(document).ready(function(){
    $("#subform").validate({
        submitHandler: function(form) {
            // do other stuff for a valid form
            $.post('test.php', $("#subform").serialize(), function(data) {
                $('#subform').html(data);
            });
        }
    });
}); 

答案 2 :(得分:0)

另一种方法是在鼠标滚动上加载数据,如:

  //approx this
$(document).ready(function () {
    var flg='1';
    $(window).scroll(function () {
    console.log($(document).scrollTop());
    if ($(document).scrollTop() >299){
        if(flg=='1')
            {
        $.post( 'link to server side code', function( data ) {
            $('#morefrom').html(data.htmls);
        },'json');
         flg='0';
            }
    }
  });});

通过这种方式,您可以在特定的鼠标滚动值上加载数据(就像用户在页面底部加载新行一样) scrollTop docs