$.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(Asynchronous JavaScript and XML)를 사용해야 합니다. AJAX를 사용하면 웹페이지가 전체 페이지를 다시 로드하지 않고도 비동기적으로 서버와 통신할 수 있습니다. 이렇게 하면 동적으로 로드된 콘텐츠에 포함된 양식이 의도한 대상에 데이터를 올바르게 제출할 수 있습니다.

기본적으로 AJAX를 사용하면 서버의 PHP 파일로 데이터를 보내고, 데이터를 처리하고, 응답 없이 응답을 반환할 수 있습니다. 페이지를 다시 로드하는 중입니다. 워크플로는 다음과 같습니다.

파일 #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 요청이 트리거됩니다. 요청은 "receiver_file.php"로 전송되며 선택한 옵션의 값이 포함되어 있습니다.

파일 #2: receive_file.php

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

이 PHP 파일에는, 수신된 데이터는 $recd 변수에 저장되고 응답은 client.

결과:

"File #1"에서 옵션이 변경되면 "File #2"에 AJAX 요청이 이루어집니다. 데이터가 처리되고 페이지를 다시 로드하지 않고도 응답이 클라이언트로 다시 전송됩니다.

위 내용은 $.load() 호출 내의 양식이 올바르게 게시되지 않는 이유는 무엇이며 AJAX는 이를 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!