使用 Ajax 在 DIV 中重新加载 MySQL 数据答案

【问题标题】：Reload MySQL data inside a DIV using Ajax使用 Ajax 在 DIV 中重新加载 MySQL 数据
【发布时间】：2012-06-19 16:48:24
【问题描述】：

我需要制作一个类似 fmylife.com 中的温和系统。基本上我遇到的问题是使用 Ajax（不刷新页面）将 MySQL 查询加载到 div 中。 MySQL查询

$sql = mysql_query(“SELECT * FROM posts WHERE active =’0’” LIMIT 1) or die (mysql_error());
$row = mysql_fetch_array($sql);

HTML

<div class=”post-body”><?php echo $row[‘sitepost’];?></div>

按“是”或“否”按钮时应重新加载此数据。提前致谢。

【问题讨论】：

@Sarfraz - 这就是我想知道的。 Ajax 代码。 @T-Shirt Dude 是的，我已经尝试了这么多天了。我终于来了。

标签： php jquery mysql ajax

【解决方案1】：

您可以添加$("html, body").animate({ scrollTop: 0 }, 500); 。因此，当您单击“是”按钮时，滚动向上移动到顶部。看起来不错。

【讨论】：

【解决方案2】：

@mgraph 已关闭，但如果您想在按钮上单击

在post.php：

//$UserOption will be Yes/No for button clicks or empty string for first load of the page

$UserOption = $_REQUEST['UserClicked'];

//Id will be set if a vote has been clicked or empty string if it's the first load
$Id = $_REQUEST['Id'];

//(Do something with $UserOption)

$sql = mysql_query("SELECT * FROM posts WHERE active ='0' LIMIT 1") or die (mysql_error());
$row = mysql_fetch_array($sql);
echo $row['sitepost'];

JS：

<script type="text/javascript">
$(document).ready(function(){
   update(null,null);
})

function update(Id, Vote) {
    $(".post-body").eq(0).load("post.php?UserClicked=" + Vote + "&Id=" + Id);
}
</script>

HTML：

<div class="post-body"></div>


<button type="button" onclick="update(1, 'Yes');">Yes</button>
<button type="button" onclick="update(1, 'No');">No</button>



<button type="button" onclick="update(2, 'Yes');">Yes</button>
<button type="button" onclick="update(2, 'No');">No</button>

备用 HTML/JS

<script type="text/javascript">
$(document).ready(function(){
    $("#yes").click(function(){
        update('Yes');
    })
    $("#no").click(function(){
        update('No');
    })
    update();
})

function update(Vote) {
    $(".post-body").eq(0).load("post.php?UserClicked=" + Vote);
}
</script>

<div class="post-body"></div>
<button id="yes" type="button">Yes</button>
<button id="no" type="button">No</button>

【讨论】：

这很好，但是点击事件在哪里？
实际上，我只是将它硬编码到 html 中的按钮上...您总是可以给按钮/div 一个 ID 并使用 jQuery 附加点击。请参阅我的修订以了解附加点击的另一种方式
@Basic 那真的很好。谢谢。我想问的另一件事可以在投票中单独发布一个 ID。其他明智的 mysql 查询会输出相同的结果，不是吗？
当然——大概你有多个按钮来表示是/否——所以我建议你回到我最初提出的按钮上的功能方法。我会酌情编辑它
请注意，如果按钮实际上要在每次页面刷新时在服务器端生成，您实际上需要为它们返回 HTML，包括帖子正文中的 Id。另外，不要忘记实现一种机制来防止用户单击两次——例如在单击时禁用按钮或类似操作（但这超出了本 Q 的范围）。另外，考虑使用mysqli_ 函数而不是mysql_，它们会得到更好的维护并允许“参数化查询”，这对于防止SQL Injection attacks 很重要

【解决方案3】：

在post.php：

$sql = mysql_query("SELECT * FROM posts WHERE active ='0' LIMIT 1") or die (mysql_error());
$row = mysql_fetch_array($sql);
echo $row['sitepost'];

JS：

<script type="text/javascript">
$(document).ready(function(){
   $("#yes").click(function(){
      $(".post-body").eq(0).load("post.php");
   })
})
</script>

HTML：

<div id="yes">YES</div>
<div class="post-body"></div>

【讨论】：

感谢单击按钮（单击事件）时如何使其工作？说按钮 id 是“是”
@nickcruse 很高兴能帮到你