為什麼 $.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中文網其他相關文章！