从数据库中检索数据，并通过使用AJAX显示它 [英] Retrieving data from database and displaying it by using ajax

问题描述

好了的人，有什么我想其实是想实现的是，创建一个类似于一个聊天框的东西而无需刷新页面去FB。我有两个表在我的数据库（phpMyAdmin的），其中第一个表，我存储用户的聊天ID（唯一的），后来保存他们的信息在另一个表，这样我就可以只通过唯一的ID来检索他们的聊天记录。

Okay people, what I am trying actually trying to achieve is, to create a chat box something similar to fb without refreshing the page. I have two tables in my database(phpmyadmin) where the first table, i store 2 users chat id(unique) and later save their message in another table so that i will be able to retrieve their chat history just by their unique id.

所以，我能够通过使用GET方法发送的唯一ID的第二个div，然后通过数据库使用PHP运行并显示他们的谈话发送其ID（唯一的）。

So I was able to send their Id(unique) by using get method to send the unique ID to the second div and then run through the database using php and display their conversation.

那么，如何能做到这一点在阿贾克斯使网页不刷新的家伙？在一些指导好吗？我一直在试图谷歌，但我不能找到一种方法，只是因为我不知道阿贾克斯多。

So how can i do it in ajax so that the page does not refreshes guys ? Some guide on that please ? I have been trying to google for it but i cant find a way simply because i do not know ajax much.

我想它不刷新页面的目的，是因为我使用jQuery来隐藏和显示的聊天对话。当页面刷新，在谈话中消失。对不起，如果我的解释是不是点上，希望有人理解我的问题，并指导我在这：D

The purpose of me wanting it to not refresh the page is because i am using Jquery to hide and show the chat conversation. When the page refreshes, the conversation disappears. Im sorry if my explanation is not on point, hopefully somebody understands my problem and guide me in this :D

因此​​，这里有我的codeS ...

So here are my codes ...

这code是在我的第一个div。它基本上显示了所有谁我都聊之前的用户...

This code is in my first div. It basically displays all the users who I have chatted with before...

<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）...

So basically when i click the names which will be in the < li > tag, it should be posting the messages in another div(Which is the div below)...

<!-- //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>

PS：我真的不知道如何工作与阿贾克斯所以这就是为什么我在这里张贴。任何帮助将是巨大的！提前致谢 ！ ：D

P.S : I'm not really sure how to work with ajax so that is why i am posting it here. Any help would be great! Thanks in advance ! :D

推荐答案

与阿贾克斯工作，在开始的时候，是非常令人沮丧。你应该从更简单的任务，简单地理解你的工作内容有。 开始有这样的事情，即发送两个数字到服务器，然后提醒总和的简单请求

Working with ajax, at the beginning, can be very frustrating. You should start with more simple task, simply to understand what you're working with. Start with something like this, a simple request that send two numbers to the server and then alert the sum

ajax_request.php

ajax_request.php

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

index.html的

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的来进一步了解这项工作。

Open index.html (download the jQuery library), fill the two numbers and click the button. You can test the "Something went wrong", simply put a wrong url (ajax_requestx.php instead of ajax_request.php). From here, you can study "ajax" and "jQuery" to understand better how this work.

的概念是这样的：你停止的形式发送（即preventDefault（）），而是发送asyncronous方式的形式，使得JavaScript的请求发送给服务器，而无需改变页面;在成功功能可以分析发送从服务器返回的字符串，并用它做什么。通过JavaScript的全部完成

The concept is this: you stop the form to be sent (e.preventDefault()) and instead send the form in "asyncronous" way, making javascript send the request to the server without changing the page; in the "success" function you can analyze the string sent back from the server and do something with it. All done by javascript

这篇关于从数据库中检索数据，并通过使用AJAX显示它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！