从数据库中检索数据并使用ajax显示它答案

【问题标题】：Retrieving data from database and displaying it by using ajax从数据库中检索数据并使用ajax显示它
【发布时间】：2016-02-21 16:43:44
【问题描述】：

好吧，我真正想要实现的是，在不刷新页面的情况下创建一个类似于 fb 的聊天框。我的数据库（phpmyadmin）中有两个表，其中第一个表存储 2 个用户聊天 ID（唯一），然后将他们的消息保存在另一个表中，这样我就可以通过他们的唯一 ID 检索他们的聊天历史记录。

所以我能够通过使用 get 方法将唯一 ID 发送到第二个 div 来发送他们的 ID（唯一），然后使用 php 运行数据库并显示他们的对话。

那么我怎样才能在 ajax 中做到这一点，以使页面不刷新伙计们？请提供一些指导？我一直在尝试用谷歌搜索它，但我找不到方法，因为我不太了解 ajax。

我希望它不刷新页面的目的是因为我使用 Jquery 来隐藏和显示聊天对话。当页面刷新时，对话消失。如果我的解释不正确，我很抱歉，希望有人能理解我的问题并指导我：D

这是我的代码...

这段代码在我的第一个 div 中。它基本上显示了我之前与之聊天的所有用户......

<div>
    <ul style="list-style-type: none;">
    <?php  
    include 'connectDB.php';
    //retrieve all the message history of yours from the PrivateMessage table
    $query = "SELECT * FROM `messagecheck` WHERE `sender_a` = '$userId' 
            OR `sender_b` = '$userId';";
    $result = mysqli_query($dbconnect,$query);
    if(mysqli_num_rows($result) > 0)
    {   
        //if exist, display the history 
        while($row = mysqli_fetch_assoc($result))
        {   
        ?>
            <a href="Item_v1.php?msgId=<?php echo $row['exist']?>">

            <li style="color:black; width:100%; padding-top:5px" >
                <input id="IDValue" name="IDValue" value="<?php echo $row['exist']?>" >
                <?php 
                //if the sender_a id is not my id, display the name
                //if sender_a is my id, then display sender_b
                //Because we dont want to see our name in the chat History
                if($row['sender_a'] != $userId)
                {
                    $senderName = $row['sender_a'];
                     include 'connectDB.php';
                     $nameSearch = "SELECT `fName`, `lName` FROM `register` WHERE `id`='$senderName';";
                     $Searchresult = mysqli_query($dbconnect,$nameSearch);
                     $Searchrow = mysqli_fetch_assoc($Searchresult);
                     echo $Searchrow['fName'] ." ". $Searchrow['lName'];
                }
                else
                {
                    $senderName = $row['sender_b'];
                     include 'connectDB.php';
                     $nameSearch = "SELECT `fName`, `lName` FROM `register` WHERE `id`='$senderName';";
                     $Searchresult = mysqli_query($dbconnect,$nameSearch);
                     $Searchrow = mysqli_fetch_assoc($Searchresult);
                     echo $Searchrow['fName'] ." ". $Searchrow['lName'];
                } 
                ?>
            </li>

            </a>
        <?php
        }
    }
    ?>
    </ul>
</div>

所以基本上当我点击将在

标签中的名称时，它应该在另一个 div 中发布消息（即下面的 div）...

<!-- //Message Content! -->
<div style="width:100%;max-height: 300;border: 2px solid #1F1F1F;overflow: auto;">
<?php 
if($_GET)
{
        $msgId = $_GET['msgId'];
}
if(!empty($msgId))
{
    include 'connectDB.php';
    $collectMsgQuery = "SELECT * FROM `privatemessage` WHERE `existing_id` = $msgId";
    $MsgResult = mysqli_query($dbconnect, $collectMsgQuery);
        if(mysqli_num_rows($MsgResult) > 0)
        {
            while($Msgrow = mysqli_fetch_assoc($MsgResult))
            {
                if($userId == $Msgrow['from_who']){
                ?>  
                    <h4 class="ifMe"><span class="ifMeDesign"><?php echo $Msgrow['message'] ?></span></h4>
                <?php
                }else if ($userId == $Msgrow['to_who']) {
                ?>
                    <h4 class="notMe"><span class="notMeDesign"><?php echo $Msgrow['message'] ?></span></h4>
                <?php
                }
            }
        }
}
?>  
</div>

P.S：我不太确定如何使用 ajax，所以我在这里发布它。任何帮助都会很棒！提前致谢！ :D

【问题讨论】：

如果您还没有尝试过使用 AJAX，这是一个相当高级的话题。查看jQuery AJAX 方法并尝试发送一些基本请求并查看您返回的数据，然后您可能会看到通往最终目标的路径。如果您在问题的某个方面需要更具体的帮助，请在此处询问。
Ajax 意味着您的页面上有 javascript 异步调用另一个端点，然后对来自该端点的数据进行处理。 jQuery 是一个容易上手的库。
哦，你的$collectMsgQuery 字符串也有一个SQL 注入漏洞——任何人都可以在你的$_GET['msgId'] 变量中放置任意代码并在你的数据库上执行它。
$query = "SELECT * FROM messagecheck WHERE sender_a = '$userId' OR sender_b = '$userId';";...你不应该使用这个...你应该使用MySQL参数（准备好的语句）。

标签： php jquery html ajax mysqli

【解决方案1】：

一开始使用 ajax 可能会非常令人沮丧。您应该从更简单的任务开始，只是为了了解您正在处理的内容。从这样的事情开始，一个简单的请求，将两个数字发送到服务器，然后提醒总和

ajax_request.php

<?php
$num1 = isset( $_GET[ "num1" ] ) ? $_GET[ "num1" ]: 0;
$num2 = isset( $_GET[ "num2" ] ) ? $_GET[ "num2" ]: 0;
echo $num1 + $num2;

index.html

    <html>
    <head>
        <script src="jquery-1.11.3.min.js"></script>
        <script>
        $(document).ready(function () {
            $( "#calculate" ).click(function(e) {
                e.preventDefault();
                $.ajax({
                    url: 'ajax_request.php',
                    data: $( "#form" ).serialize(),
                    success: function( data ) {
                        alert( data );
                    },
                    error: function() {
                        alert( "Something went wrong" );
                    }
                });
            });
        });
        </script>
    </head>
    <body>
        <form id="form">
            Num1: <input type="text" name="num1" /><br />
            Num2: <input type="text" name="num2" /><br />
            <input type="submit" id="calculate" />
        </form>
    </body>
</html>

打开 index.html（下载 jQuery 库），填写两个数字并单击按钮。您可以测试“出现问题”，只需输入错误的 url（ajax_requestx.php 而不是 ajax_request.php）。从这里，您可以学习“ajax”和“jQuery”，以更好地了解其工作原理。

这个概念是这样的：您停止发送表单（e.preventDefault()），而是以“异步”方式发送表单，使 javascript 将请求发送到服务器而不更改页面；在“成功”函数中，您可以分析从服务器发回的字符串并对其进行处理。全部由javascript完成

【讨论】：

这不是对所提问题的回答，而是评论。
Pherapse，但我无法在 cmets 中发布代码，我认为以这种方式显示问题更有用，只需编写“学习 ajax 和 jquery”
在这种情况下，最好发布评论并附上一个示例的链接，例如phpfiddle、jsFiddle、codepen等