javascript - 如何正确加载一个又一个ajax请求

Question

我正在为我正在制作的网站创建一个消息系统。基本上，它包括单击一个按钮和随后的两个 Ajax 请求。我什至不确定我是否以正确的方式处理这件事。单击按钮后，第一个 Ajax 开始调用。第一个 ajax 请求加载一个文件，该文件加载消息的样式并从数据库中检索它们。我遇到的问题是，第一个请求有时需要很长时间才能完成，而另一个请求则无法完成。我遇到的另一个问题是，如果我在上面放一个“动画延迟”类型的东西，那么它看起来就像页面运行缓慢。您可以在“http://www.linkmesocial.com/linkme.php?activeTab=mes”处运行示例，您必须输入或复制并粘贴整个长度才能使其正常工作，否则您将重定向到登录页面。任何建议都会很棒!如果有更简单的方法来设置消息系统，请随时给我一些建议或指导我查看教程。非常感谢!

我还想知道这是否是一个好的做法。请:)

<小时/>

我的原始文件。单击“mes_tab”类后，将提交一个表单。还会调用函数 mes_main()。

session_start();
$username = $_SESSION['user'];
$messages = mysqli_query($con, "SELECT * FROM messages WHERE recipient='$username'");
echo "<div id=\"mes_main-bar_top\" class=\"center\">Messages</div>";
echo "<div id=\"mes_main\">";
echo "<table id=\"mes_main-allView\" class=\"left\">";
echo "<td class=\"mes_tab-change\" >^</td>";
$from=array("","","", "", "", "", "", "");

for ($msgCount = 0; $msgCount < 8; $msgCount++){
    $row = mysqli_fetch_array($messages);
    $from[$msgCount] = $row['sender'];
    for ($prev = 0; $prev < $msgCount; $prev++)
    {
        if ($from[$msgCount] == $from[$prev] )
        {
                $cont = true;
                break;

        }
    }
    if ($cont)
    {
    $cont = false;
    continue;
    }
    if ($row['message'] == ""){
        break;  
    }

    echo "<tr><td class=\"mes_tab\" onclick=\"mes_main('" . $row['sender'] .  "')\">";
    echo "<h3 class=\"center\">" . $row['sender'] .  "</h3>";
    echo "<form id=\"" . $row['sender'] .  "\" >";
    echo "<input name=\"sender\" value=\"" . $row['sender'] . "\" hidden/>";
    echo "<input name=\"id\" value=\"" . $row['id'] . "\" hidden/>";
    echo "</form>";
    echo "</td></tr>";

}


if ($msgCount == 8)
{
echo "<td id=\"mes_tab-change_bottom\" class=\"mes_tab-change\">V</td>";
}
echo "</table>  <!-- end mes_main-allView -->";

echo "<div id=\"mes_main-mesView\" class=\"right\">";

echo "</div>    <!-- end mes_main-mesView -->";

echo "</div>    <!-- end mes_main -->";

<小时/>

上面的mes_main()函数。里面的两个ajax函数就是我在上面的帖子中提到的。

function mes_main(x)
{
var sender = x;
$( sender ).submit(function( event ) {
  event.preventDefault();

});


ajax_req_mes("scripts/home/php/mes_load.php?" + sender , "mes_main-mesView");
ajax_req_mes("scripts/home/php/mes_content.php?" + sender ,"mes_content");



}

<小时/>

mes_load.php

$sender 变量是通过 URL 传递发件人用户名创建的。这就是为什么我在 url 上进行 php 爆炸。

session_start();
$username = $_SESSION['user'];
$url = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
$sender = explode('?', $url);
$recieved = mysqli_query($con, "SELECT * FROM messages WHERE recipient='$username' AND sender='$sender[1]'");
$sent = mysqli_query($con, "SELECT * FROM messages WHERE recipient='$sender[1]' AND sender='$username'");

echo "<div id=\"mes_content\"></div>";
echo "<div id=\"mes_field\" class=\"right\"></div>";

<小时/>

mes_content.php

session_start();
$username = $_SESSION['user'];
$url = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
$sender = explode('?', $url);
$recieved = mysqli_query($con, "SELECT * FROM messages WHERE recipient='$username' AND sender='$sender[1]'");
$sent = mysqli_query($con, "SELECT * FROM messages WHERE recipient='$sender[1]' AND sender='$username'");


echo "<table id=\"mesView-table\">";

$REC = array();
$SENT = array();

$ID = array();



for ($i = 0; $i < 25; $i++)
{


$rec = mysqli_fetch_array($recieved);
$sent = mysqli_fetch_array($sent);


    if ($rec['id'] > 0)
    {
    $REC[$i] = $rec['id'];
    }


    if ($sent['id'] > 0)
    {
    $SENT[$i] = $sent['id'];
    }



}

$ID = array_merge($SENT, $REC);
sort($ID);

    for ($x = 0; $x < count($ID); $x++) 
    {
    $key = $ID[$x]; 
    $result = mysqli_query($con, "SELECT * FROM messages WHERE id = '$key'");
    $res = mysqli_fetch_array($result);
        if (in_array($key, $REC))
        {

            echo "<tr><td class='mes_recieved'>";
            echo $res['message'];           
            echo "</tr></td>";
        }
        elseif (in_array($key, $SENT))
        {
            echo "<tr><td class='mes_sent'>";
            echo $res['message'];       
            echo "</tr></td>";              
        }


    }

echo "</table>";

Answer 1

在 ajax 请求中将 async 设置为 false!这就是第二个请求等待第一个请求完成然后开始的方式。 您还可以根据您的目的捕获成功和错误。