728x90
반응형
질문 : PHP를 사용한 jQuery Ajax POST 예제
양식에서 데이터베이스로 데이터를 보내려고합니다. 내가 사용하는 양식은 다음과 같습니다.
<form name="foo" action="form.php" method="POST" id="foo">
<label for="bar">A bar</label>
<input id="bar" name="bar" type="text" value="" />
<input type="submit" value="Send" />
</form>
일반적인 접근 방식은 양식을 제출하는 것이지만 이로 인해 브라우저가 리디렉션됩니다. jQuery 및 Ajax를 사용하면 양식의 모든 데이터를 캡처하여 PHP 스크립트 (예 : form.php )에 제출할 수 있습니까?
답변
.ajax
기본 사용법은 다음과 같습니다.
HTML :
<form id="foo">
<label for="bar">A bar</label>
<input id="bar" name="bar" type="text" value="" />
<input type="submit" value="Send" />
</form>
jQuery :
// Variable to hold request
var request;
// Bind to the submit event of our form
$("#foo").submit(function(event){
// Prevent default posting of form - put here to work in case of errors
event.preventDefault();
// Abort any pending request
if (request) {
request.abort();
}
// setup some local variables
var $form = $(this);
// Let's select and cache all the fields
var $inputs = $form.find("input, select, button, textarea");
// Serialize the data in the form
var serializedData = $form.serialize();
// Let's disable the inputs for the duration of the Ajax request.
// Note: we disable elements AFTER the form data has been serialized.
// Disabled form elements will not be serialized.
$inputs.prop("disabled", true);
// Fire off the request to /form.php
request = $.ajax({
url: "/form.php",
type: "post",
data: serializedData
});
// Callback handler that will be called on success
request.done(function (response, textStatus, jqXHR){
// Log a message to the console
console.log("Hooray, it worked!");
});
// Callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
// Log the error to the console
console.error(
"The following error occurred: "+
textStatus, errorThrown
);
});
// Callback handler that will be called regardless
// if the request failed or succeeded
request.always(function () {
// Reenable the inputs
$inputs.prop("disabled", false);
});
});
참고 : jQuery 1.8부터 .success()
, .error()
및 .complete()
.done()
, .fail()
및 .always()
대신 사용되지 않습니다.
참고 : 위의 스 니펫은 DOM이 준비된 후에 수행되어야하므로 $(document).ready()
핸들러 안에 넣어야합니다 (또는 $()
속기 사용).
팁 : 당신은 할 수 체인 과 같이 콜백 핸들러 : $.ajax().done().fail().always();
PHP (즉, form.php) :
// You can access the values posted by jQuery.ajax
// through the global variable $_POST, like this:
$bar = isset($_POST['bar']) ? $_POST['bar'] : null;
참고 : 삽입 및 기타 악성 코드를 방지하기 위해 항상 게시 된 데이터를 삭제하십시오.
위의 자바 스크립트 코드에서 .ajax
대신 .post
를 사용할 수도 있습니다.
$.post('/form.php', serializedData, function(response) {
// Log the response to the console
console.log("Response: "+response);
});
참고 : 위의 JavaScript 코드는 jQuery 1.8 이상에서 작동하도록 만들어졌지만 이전 버전에서 jQuery 1.5까지 작동해야합니다.
출처 : https://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php
728x90
반응형
'프로그래밍 언어 > jQuery, ajax' 카테고리의 다른 글
jQuery에서 요소가 숨겨져 있는지 확인하는 방법 (0) | 2021.08.23 |
---|---|
jQuery에서 텍스트 영역 값 설정 (0) | 2021.08.23 |
jQuery - 텍스트 내용을 통해 select의 value를 설정하는 방법 (0) | 2021.08.20 |
jQuery를 사용하여 select의 선택된 값 가져 오기 (0) | 2021.08.20 |
jQuery $ (document) .ready 및 UpdatePanels (0) | 2021.08.12 |