javascript - 数据库驱动的页面内容

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

最佳答案

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

  //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

关于javascript - 数据库驱动的页面内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20825253/

相关文章:

javascript - 获取 SVG 路径的总长度

javascript - "draggable is not a function"当在另一个函数内时

javascript - 为什么atob和btoa不可逆

php - PHP验证十进制数字并转换为美国货币格式

jquery - 水平选择全宽 jQuery Mobile

javascript - 启用插件后更改 TinyMCE HTML

javascript - 异步 – 由多个基于 Promise 的 API 调用形成的 Orgchart,返回彼此依赖的数据

php - 如何在 Laravel 中将数组对象和数据添加到 JSON

javascript - 动态添加新字段后创建一个 "remove fields"按钮?

javascript - jQuery 在任何版本的 ie 中都不起作用?