使用 AJAX 动态更新数据库中的文本答案

【问题标题】：Using AJAX to dynamically update text from a database使用 AJAX 动态更新数据库中的文本
【发布时间】：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 都包含在同一页面中。
同样，您缺少引号并将字符串作为未引用的参数回显。
谢谢，我会在编辑中更新它

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

【讨论】：