使用 AJAX 动态更新数据库中的文本
Posted
技术标签:
【中文标题】使用 AJAX 动态更新数据库中的文本【英文标题】：Using AJAX to dynamically update text from a database 【发布时间】：2014-08-13 00:19:12 【问题描述】：我一直在努力学习 AJAX，以便我可以简单地使用数据库中的新文本动态更新我的网页，因为似乎所有 ajax 教程都是涉及将数据写入数据库的更复杂的示例
我正在处理的页面只是一个 php 脚本，需要将注册和 ID 号发布到它，然后它会显示来自数据库的消息（经常更新）。我目前在我的页面顶部有一个“更新消息”按钮，它发送命令以更新消息，但它需要刷新页面才能工作。
我只想使用 ajax 来动态刷新消息。这是我到目前为止所写的内容，基于我在 Using Jquery Ajax to retrieve data from mysql 找到的内容，但它不起作用，因为我不知道如何使用 ajax 将注册和 ID 号作为参数传递给 php 脚本和显示响应。
注意sendPushNotification函数是无关的并且可以正常工作（用于发送命令更新消息）。
readmessages.php
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Inbox</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
);
function sendPushNotification(id)
var data = $('form#'+id).serialize();
$('form#'+id).unbind('submit');
$.ajax(
url: "send_message.php",
type: 'GET',
data: data,
beforeSend: function()
,
success: function(data, textStatus, xhr)
$('.txt_message').val("");
,
error: function(xhr, textStatus, errorThrown)
);
return false;
function updateText(registration, rowid)
$.ajax( //create an ajax request to readmessages.php
type: "GET",
url: "readmessages.php",
dataType: "html", //expect html to be returned
success: function(response)
$("#responsecontainer").html(response);
);
</script>
</head>
<body>
<?php
// receive data from HTML readmessages request
$rName=$_POST["registration"]; //POST information required to read information from the database
$rowId=$_POST["rowid"];
require_once 'access.php';
if (!userIsLoggedIn())
include 'login.php';
exit();
include_once './db_functions.php';
$db = new DB_Functions();
?>
<form id="<?php echo $rowId ?>" name="" method="post" onsubmit="return sendPushNotification('<?php echo $rowId ?>')">
<input type="hidden" name="message" value="readmessages" />
<input type="hidden" name="regId" value="<?php echo $rName ?>"/>
<input type="submit" class="send_btn" value="Update Messages" onclick="return updateText(<?php echo $rName ?>, <?php echo $rowId ?>);"/> //Attempts to call function to update text once button is pressed (not functioning)
<?php
$messagelist = $db->getInbox($rName); //calls the database to retrieve messages
echo nl2br($messagelist); //Displays message list that I want to update
include './logout.php';
?>
</body>
</html>
任何帮助将不胜感激！
编辑：更新行以包含正确的引号：
<input type="submit" class="send_btn" value="Update Messages" onclick="return updateText('<?php echo $rName ?>', '<?php echo $rowId ?>')"/>
【问题讨论】：
PHP和AJAX在同一个页面吗？ 请注意您是如何在sendPush.. 函数的参数中而不是在 updateText 函数中引用 PHP 的输出的。
是的，包含从数据库访问信息并显示它的脚本的 PHP 以及 AJAX 都包含在同一页面中。
同样，您缺少引号并将字符串作为未引用的参数回显。
谢谢，我会在编辑中更新它
【参考方案1】：
要在AJAX 和PHP 之间进行通信，你必须知道两件事：
1) 如果您使用的是PHP's$_POST，您的AJAX 还必须表示发布数据，并且，
2) 如果您使用的是PHP's $_GET，您的AJAX 也必须表示Getting数据。
所以，你不能这样做：
$.ajax( //create an ajax request to readmessages.php
type: "GET",//NOTICE THIS GET thingi...
url: "readmessages.php",
dataType: "html", //expect html to be returned
success: function(response)
$("#responsecontainer").html(response);
然后做：
<?php
// receive data from HTML readmessages request
$rName=$_POST["registration"]; //NOTICE THE $_POST guy.. //POST information required to read information from the database
$rowId=$_POST["rowid"];
你宁愿在两边都使用'POST'或'GET'
所以，如果您只想简单地POST，您的 AJAX 可能只是如下所示：
$.post('url_goes_here.php',myDataXXX:comes_here,function(response_here)
console.log(response_here);
)
和你的 PHP
<?php
var_dump($_POST['myDataXXX'])
?>
如果你只想简单地GET，你的 AJAX 可能看起来像：
$.get('url_goes_here.php',myDataXXX:comes_here,function(response_here)
console.log(response_here);
)
还有你的PHP
<?php
var_dump($_GET['myDataXXX'])
?>
希望对您有所帮助...
【讨论】：
【参考方案2】：您需要在 ajax 请求中包含数据，
data: registration: registration, rowid: rowid,
并将类型设置为 POST，因为您在 php 端检索 POST 变量。
就这样……
function updateText(registration, rowid)
$.ajax( //create an ajax request to readmessages.php
type: "POST",
url: "readmessages.php",
dataType: "html", //expect html to be returned
data: registration: registration, rowid: rowid,
success: function(response)
$("#responsecontainer").html(response);
【讨论】：
以上是关于使用 AJAX 动态更新数据库中的文本的主要内容，如果未能解决你的问题，请参考以下文章