jQuery의 AJAX POST 요청

오늘의 게시물은 jQuery의 AJAX POST 요청에 대해 설명합니다.

jQuery의 AJAX POST 요청

jQuery의 AJAX POST 요청은 AJAX(비동기 HTTP) 요청을 수행합니다.

통사론:

jQuery.ajax(url[, settings])
jQuery.ajax([settings])

1. URL은 요청을 보낼 URL이 포함된 문자열입니다.
2. settings는 AJAX 요청을 구성하는 키/값 쌍 개체입니다. 모든 설정은 선택 사항입니다. $.ajaxSetup()을 사용하여 각 옵션에 대한 기본값을 설정할 수 있습니다.

$.ajax() 함수는 jQuery를 통해 전달된 모든 AJAX 요청의 기초가 됩니다. $.Get() 및 .load()와 같은 많은 상위 수준 옵션을 사용할 수 있고 적용하기가 더 간단하기 때문에 이 특성을 한 번에 호출하는 것은 종종 쓸모가 없습니다.

$.ajax()가 더 유연하게 사용될 수 있지만 훨씬 적은 경우 일반 옵션이 필요합니다.

jQuery 1.5에서 $.ajax()를 통해 반환된 jQuery XMLHttpRequest (jqXHR) 개체는 브라우저 로컬 XMLHttpRequest 요소의 상위 집합입니다. 예를 들어, responseText 및 responseXML 하우스와 getResponseHeader() 기술이 포함되어 있습니다.

전달 메커니즘이 XMLHttpRequest(예: JSONP 요청에 대한 스크립트 태그)와 별개인 반면 jqXHR 항목은 가능한 경우 기본 XHR 기능을 시뮬레이션합니다.

jQuery 1.5.1부터 jqXHR 객체는 overrideMimeType() 메소드를 추가로 전달합니다(jQuery 1.4.X에서는 멋지게 변경되었지만 jQuery 1.5에서는 잠시 제거됨). 예를 들어 .overrideMimeType() 기술은 beforeSend() 콜백 함수 내에서 사용하여 응답의 Content-Type 헤더를 변경할 수 있습니다.

$.Ajax() 호출에 대한 고유한 응답은 성공 핸들러에 전달되기 전에 특정 유형의 사전 처리를 받습니다. 사용 가능한 정보 종류는 text, HTML, XML, JSON, JSONP 및 script입니다.

데이터 옵션은 key1=value1&key2=value2 형식의 쿼리 문자열 또는 {key1: 'value1', key2: 'value2'} 형식의 개체로 데이터를 보낼 수 있습니다.

브라우저 안전 제한으로 인해 대부분의 AJAX 요청은 동일 출처 적용 대상입니다. 요청은 다른 도메인, 하위 도메인, 포트 또는 프로토콜에서 사실을 효과적으로 검색할 수 없습니다.

.ajax() 문서에서 더 많은 정보를 찾아보세요.

다음 예를 통해 이해해 봅시다. 다음 코드는 있는 그대로 실행할 수 없으며 출력이 없습니다.

출력을 보려면 기존 코드에 추가해야 합니다.

<form id="myForm">
    <label for="name">Name</label>
    <input id="name" name="name" type="text" value="Smith" />
    <input type="submit" value="Send" />
</form>

$('#myForm').submit(function(event) {
  event.preventDefault();
  $.ajax({
     method: 'POST',
     url: '/open/hello-world',
     data: {name: 'Smith', location: 'Doe'}
   }).done(function(msg) {
    alert('Data Saved: ' + msg);
  });
})

사용자가 위의 예에서 양식을 제출하면 지정된 URL 및 매개변수를 사용하여 AJAX 호출이 서버로 전송됩니다. 서버가 성공적인 메시지와 함께 반환되면 콘솔에 메시지를 인쇄하거나 적절한 메시지로 사용자에게 알릴 수 있습니다.