AJAX를 사용하여 $.load 내에 양식 데이터를 올바르게 게시하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

AJAX를 사용하여 $.load 내에 양식 데이터를 올바르게 게시하는 방법은 무엇입니까?

Mary-Kate Olsen

풀어 주다： 2024-11-11 14:04:03

원래의

470명이 탐색했습니다.

How to Correctly Post Form Data Within $.load Using AJAX?

AJAX를 사용하여 $.load 내의 양식 게시 수정

$.load 호출 내의 양식에서 데이터를 게시하려고 하면 게시물이 대상 PHP 스크립트로 제대로 전송되지 않는 문제가 발생할 수 있습니다. 이로 인해 제출된 데이터를 처리하는 대신 페이지가 다시 로드될 수 있습니다.

이 문제를 해결하려면 AJAX 구현을 고려하세요. AJAX를 사용하면 페이지를 다시 로드하지 않고도 서버측 PHP 파일로 데이터를 보낼 수 있습니다. 작동 방식은 다음과 같습니다.

파일 #1:

이 파일에는 양식에 대한 HTML 및 JavaScript 코드가 포함되어 있습니다.

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#Sel').change(function() {
                    var opt = $(this).val();
                    var someelse = 'Hello';
                    var more_stuff = 'Goodbye';
                    $.ajax({
                        type: "POST",
                        url: "receiving_file.php",
                        data: 'selected_opt=' + opt + '&amp;something_else=' +someelse+'&amp;more_stuff='+more_stuff,
                        success:function(data){
                            alert('This was sent back: ' + data);
                        }
                    });
                });
            });
        </script>
    </head>
<body>

<select id = "Sel">
    <option value ="Song1">default value</option>
    <option value ="Song2">Break on through</option>
    <option value ="Song3">Time</option>
    <option value ="Song4">Money</option>
    <option value="Song5">Saucerful of Secrets</option>
</select>
</body>
</html>

로그인 후 복사

파일 #2: receive_file.php

이 파일은 제출된 데이터를 처리하는 PHP 스크립트입니다.

    $recd = $_POST['selected_opt'];
    echo 'You chose: ' . $recd;

로그인 후 복사

이 방법을 사용하면 양식 데이터가 다시 로드되지 않고 게시됩니다. 페이지를 통해 데이터를 처리하고 적절하게 응답할 수 있습니다.

위 내용은 AJAX를 사용하여 $.load 내에 양식 데이터를 올바르게 게시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!