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

Load dynamic content from php on submitting a form

本文关键字：动态 加载 php 表单 提交      更新时间：2023-09-26

我创建了一个包含大量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()，因为我不想自动刷新页面）。

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');
  }  
});

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

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

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

我完成了我的工作。尽管我用了另一种方法。

经过几天的R&D是指，当我们将表单提交到php时，请求将与输入params一起发送。当php文件处理这个请求时，它可能正在更新一些全局变量。它完成了对请求的处理，并将控件返回到调用的index.php页面。

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

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

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

.ajax的成功参数将接收此输出，因此您可以更新聊天窗口或任何其他形式。

相关文章：