> 웹 프론트엔드 > JS 튜토리얼 > 페이지 리디렉션 없이 양식을 제출하기 위해 PHP와 함께 jQuery Ajax POST를 어떻게 사용할 수 있습니까?

페이지 리디렉션 없이 양식을 제출하기 위해 PHP와 함께 jQuery Ajax POST를 어떻게 사용할 수 있습니까?

Mary-Kate Olsen
풀어 주다: 2024-12-24 05:52:14
원래의
904명이 탐색했습니다.

How Can I Use jQuery Ajax POST with PHP to Submit a Form Without Page Redirect?

PHP를 사용한 jQuery Ajax POST: 예제

양식에서 데이터베이스로 데이터를 제출하려면 양식을 제출해야 하는 경우가 많으며, 이로 인해 브라우저가 리디렉션. jQuery와 Ajax를 사용하면 양식 데이터를 캡처하여 PHP 스크립트에 제출함으로써 이 문제를 극복할 수 있습니다.

jQuery 코드:

jQuery 코드는 다음과 같습니다. :

<form>
로그인 후 복사
// Prevent form submission
$("#foo").submit(function(event){
    event.preventDefault();
    
    // Serialize form data
    var serializedData = $("#foo").serialize();
    
    // Ajax request
    $.ajax({
        url: "/form.php",
        type: "post",
        data: serializedData,
        success: function (response) {
            console.log("Request successful");
        },
        error: function (error) {
            console.error("Error:", error);
        }
    });
});
로그인 후 복사

PHP 스크립트:

PHP 스크립트(form.php)는 제출된 데이터를 받습니다:

<?php
    $bar = isset($_POST['bar']) ? $_POST['bar'] : null;
?>
로그인 후 복사

사용법:

JavaScript 래핑 문서 준비 핸들러의 코드:

$(document).ready(function(){
    // jQuery code
});
로그인 후 복사

입력을 삭제하는 것을 기억하세요 사용자가 제출한 데이터로 작업할 때.

jQuery .post를 사용한 단축:

$.post('/form.php', serializedData, function(response) {
    console.log("Response:", response);
});
로그인 후 복사

이 방법은 jQuery 버전 1.5 이상에서 사용할 수 있습니다.

위 내용은 페이지 리디렉션 없이 양식을 제출하기 위해 PHP와 함께 jQuery Ajax POST를 어떻게 사용할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿