jQuery .ajax在发送请求之前调用成功函数

我想为我的网站制作一个聊天箱。基本上，用户使用id chat-input将他们的聊天输入到textarea。当用户点击输入按钮时，它调用sendChat()函数。该功能将请求发送到服务器上的php文件，该文件将用户的聊天添加到聊天日志（服务器上的文本文件）。成功时，javascript应该调用update（）函数，该函数对服务器上的chatlog.txt文件执行获取请求，并使用id prev-chats将其加载到div中。问题是JavaScript在服务器响应之前调用update（），因此在刷新页面之前不会更新prev聊天。我可以告诉大家，是因为
一）的聊天记录都没有更新，直到我刷新页面，并
B）在谷歌浏览器，按下F12键后，网络选项卡显示之前的chatLog.txt GET请求POST请求提交聊天。jQuery .ajax在发送请求之前调用成功函数

这里是我的HTML代码

  <div id="prev-chats" class="well"></div> 
      <textarea id="chat-input"></textarea> 
      <button class="btn btn-default" onclick="sendChat()">Enter</button> 
      <button class="btn btn-default" onclick="update()">Update</button> 
      <script type="text/javascript"> 

       function sendChat(){ 
        var message = $("#chat-input").val(); 
        var datavar = {"message": message}; 
        console.log("Sending message to server"); 
        $.ajax({ 
         type: "POST", 
         async: "false", 
         url: "chatResponse.php", 
         data: datavar, 
         success: update() 
        }); 
        console.log("Message sent to server"); 
       }; 
       function update(){ 
        $("#prev-chats").load("chatLog.txt"); 
        console.log("chat updated"); 
       } 

       update(); 
      </script>

这里是我的PHP代码

<?php 
$chatLog = fopen("chatLog.txt","a+") or die("Eror loading chat... Please try again later"); 
$chat = htmlspecialchars($_POST['message']); 
fwrite($chatLog, $chat . "<br>"); 
fclose($chatLog); 
?>

下面是我的控制台出现

(index):85 chat updated 
(index):72 Sending message to server 
(index):85 chat updated 
(index):81 Message sent to server

来源

2015-01-15 Kenth Mirta

[JavaScript函数执行太快]的可能的复制（http://stackoverflow.com/questions/15002306/javascript-功能执行的太很快）。 – JLRishe

尝试使用

success: update

代替

success: update()

来源

2015-01-15 04:13:40

这有什么理由为什么这有效？是否因为该功能是通过数据和状态参数自动调用的？ –

@KenthMirta有点晚了，但是，这个解决方案比接受的答案更优雅。你可以把'success'想象成一个函数的变量，而'update（）'是函数'update'的* call *。 'update'本身就是你想传递给该方法的函数。 – InvisiblePanda

@KenthMirta所以接受的答案将一个匿名函数传递给'success'参数，然后调用'update'函数，而这个答案直接传递更新函数。当你传递这行代码时，函数*调用*就像'update（）'执行函数。 – InvisiblePanda

更改你的Ajax这样

$.ajax({ 
        type: "POST", 
        async: "false", 
        url: "chatResponse.php", 
        data: datavar, 
        success:function(){ update()} 
       });

来源

2015-01-15 04:13:50 Mairaj

谢谢！它现在工作:) –

jQuery .ajax在发送请求之前调用成功函数

回答

相关问题