为什么 $.load() 调用中的表单无法正确发布，AJAX 如何解决这个问题？

$.load 内的表单未正确发布？问题的详细说明

通过 $.load 加载的区域中嵌入的表单无法正确发布数据的情况是很常见的。问题的关键在于 $.load 的异步特性，它将内容加载到特定元素中，而无需重新加载整个页面。这可能会导致表单的目标操作与页面所在的实际 URL 之间存在差异。

为了说明该问题，让我们考虑一个示例：

<pre class="brush:php;toolbar:false">
    Readthis = "MonsterRequest.php?id=<?php echo $_REQUEST['id']; ?>&amp;Mon=";
    TestVar = TestVar.replace(/\s/g, "");
    Readthis = Readthis + htmlencode(TestVar);
    $('#CenterPiece').load(Readthis); 

在此示例中，当单击按钮，它会执行将“MonsterRequest.php”中的内容加载到 ID 为“CenterPiece”的元素中的代码。但是，由于 $.load 是异步的，因此表单提交发生在“MonsterRequest.php”的内容完全加载之前。这意味着表单将提交到当前页面的 URL，而不是提交到其操作属性中指定的预期目标 URL。

了解 AJAX 及其如何解决问题

解决问题，有必要采用AJAX（异步JavaScript和XML）。 AJAX 允许网页与服务器异步通信，而无需重新加载整个页面。这确保了动态加载内容中嵌入的表单可以正确地将数据提交到预期目标。

本质上，AJAX 允许您将数据发送到服务器上的 PHP 文件，处理数据并返回响应，而无需重新加载页面。工作流程如下：

File #1:

<pre class="brush:php;toolbar:false">
    <script>
        $(document).ready(function() {
            $('#Sel').change(function() {
                var opt = $(this).val();
                $.ajax({
                    type: "POST",
                    url: "receiving_file.php",
                    data: 'selected_opt=' + opt,
                    success:function(data){
                        alert('This was sent back: ' + data);
                    }
                });
            });
        });
    </script>

在此脚本中，当“Sel”下拉列表更改时，会触发 AJAX 请求。请求被发送到“receiving_file.php”并包含所选选项的值。

文件 #2：receiving_file.php

<pre class="brush:php;toolbar:false">
    <?php
        $recd = $_POST['selected_opt'];
        echo 'You chose: ' . $recd;
    

在此 PHP 文件中，接收到的数据存储在 $recd 变量中，并且响应被回显到客户端。

结果：

当“文件#1”中的选项发生更改时，将向“文件#2”发出 AJAX 请求。数据被处理，响应被发送回客户端，而无需重新加载页面。

以上是为什么 $.load() 调用中的表单无法正确发布，AJAX 如何解决这个问题？的详细内容。更多信息请关注PHP中文网其他相关文章！