Question

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

所以我能够通过使用get方法发送他们的Id（唯一）来将唯一ID发送到第二个div，然后使用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>

所以基本上当我点击将在＆lt;中的名字时li>标签，它应该在另一个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

Answer 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库），填写两个数字并单击按钮。您可以测试＆＃34;出错了＆＃34;，只需输入错误的URL（ajax_requestx.php而不是ajax_request.php）。从这里，你可以学习＆＃34; ajax＆＃34;和＆＃34; jQuery＆＃34;更好地了解这项工作的方式。

这个概念是这样的：你停止发送表单（e.preventDefault（）），而是在＆＃34; asyncronous＆＃34;中发送表单。方式，使javascript将请求发送到服务器而不更改页面;在＆＃34;成功＆＃34;您可以分析从服务器发回的字符串并对其执行某些操作。全部由javascript完成

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

1 个答案: