Question

我创建了一个包含大量div的页面“index.php”，我需要在提交表单时只刷新其中一个div。

此div从chat_window.php加载内容，如下所示：

<div id="chatbox">
    <?php echo $res; ?>
</div>  

<!-- Chat user input form-->
<?php echo $formchat; ?>

chat_window.php使用来自chat.php的动态内容 - $res和$formchat。每次我发布表单时，$ res和$ formchat的内容都会被修改，我需要在我的页面中反映出相同的内容，这会加载chat_window.php。

我使用AJAX和jQuery做同样的事情：

$(document).ready(function() {
    $("#submit").click(function() {
        var name = $("input#chat").val();
        var dataString = "chat="+ name;

        $.ajax({  
            type: "POST",  
            url: "programo/bot/chat.php",  
            data: dataString,
            success: function() {  
            }  
        });  

        $("#chatwrapper").load(chat_window.php);

        return false;
    }); 
});

index.php有一个div来显示chat_window，如下所示：

<!-- Chat window-->
<div id="chatwrapper"> 
    <?php include ("chat_window.php"); ?>
</div>

根据我的分析，当我发布表单时，$ res和$ formchat将在php中更新。但是当我加载chat_window.php时，它不会加载修改后的值。它宁可加载初始静态值。（请不要建议setInterval()，因为我不想自动刷新页面。

Answer 1

Javascript是非阻塞的，因此这意味着解释器在处理下一个作业之前不会等待作业完成。

在您的代码中，$("#chatwrapper").load('chat_window.php');几乎在它上面的ajax请求完成之前被调用。您需要使用ajax成功事件来调用重新加载。

尝试：

$.ajax({  
  type: "POST",  
  url: "programo/bot/chat.php",  
  data: dataString,
  success: function() {  
     $("#chatwrapper").load('chat_window.php');
  }  
});

Answer 2

尝试将.load()语句移动到ajax成功处理程序中：

 $.ajax({  
  type: "POST",  
  url: "programo/bot/chat.php",  
  data: dataString,
  success: function() {  
       $("#chatwrapper").load("chat_window.php");
  }  

});

$.ajax()调用是异步，，这意味着执行不会暂停等待响应，而是直接转到.load()调用。（这也是异步的，所以实际上你不能保证每次通话的响应顺序都会出现，除非你在第一次通话完成之前没有进行第二次通话。）

Answer 3

我完成了我的工作。虽然我用另一种方式做到了。

在R＆amp; D几天之后我所理解的是，当我们将表单提交给php时，请求将与输入参数一起发送。当您的php文件处理此请求时，它可能正在更新一些全局变量。它完成处理请求并将控制返回给调用index.php页面。

需要注意的重要事项是：在返回控件后，处理表单提交请求时所做的变量更新不会保留。全局php变量只有在刷新页面时才会更新。

因此，如果有严格要求避免页面刷新，请在某些输出字符串中从php收集处理过的数据，并将其传递回index.php，如下所示：

$responseString = $res . "|" . $formchat; 
echo $responseString;

.ajax的success参数将收到此输出，因此您可以更新聊天窗口或任何其他表单。

在提交表单时从php加载动态内容

3 个答案: