JQuery Ajax POST 방법

프로그램 작성

서버에서 데이터를로드하기 위해 비동기 http POST 요청을 보냅니다. 일반적인 형식은 다음과 같습니다.

jQuery.post( url [, data ] [, success ] [, dataType ] )
  • url :은 유일한 필수 매개 변수입니다. 이 문자열에는 요청을 보낼 주소가 포함됩니다. 다른 매개 변수를 지정하지 않으면 반환 된 데이터가 무시됩니다.
  • data : 요청과 함께 서버로 전송되는 일반 개체 또는 문자열입니다.
  • success : 요청이 성공하면 실행되는 콜백 함수. 반환 된 데이터를 인수로받습니다. 응답의 텍스트 상태도 전달됩니다.
  • dataType : 서버에서 예상되는 데이터 유형입니다. 기본값은 Intelligent Guess (xml, json, script, text, html)입니다. 이 매개 변수가 제공되면 성공 콜백도 제공되어야합니다.

예

$.post('//example.com/form.php', {category:'client', type:'premium'});

form.php서버의 요청 , 추가 데이터 전송 및 반환 된 결과 무시

$.post('//example.com/form.php', {category:'client', type:'premium'}, function(response){ alert("success"); $("#mypar").html(response.amount); });

form.php서버의 요청 , 추가 데이터 전송 및 반환 된 응답 처리 (json 형식). 이 예제는 다음 형식으로 작성할 수 있습니다.

$.post('//example.com/form.php', {category:'client', type:'premium'}).done(function(response){ alert("success"); $("#mypar").html(response.amount); });

다음 예제는 Ajax를 사용하여 양식을 게시하고 결과를 div에 넣습니다.

    jQuery.post demo // Attach a submit handler to the form $( "#searchForm" ).submit(function( event ) { // Stop form from submitting normally event.preventDefault(); // Get some values from elements on the page: var $form = $( this ), term = $form.find( "input[name='s']" ).val(), url = $form.attr( "action" ); // Send the data using post var posting = $.post( url, { s: term } ); // Put the results in a div posting.done(function( data ) { var content = $( data ).find( "#content" ); $( "#result" ).empty().append( content ); }); });

다음 예제는 github api를 사용하여 jQuery.ajax ()를 사용하여 사용자의 저장소 목록을 가져오고 결과를 div에 넣습니다.

    jQuery Get demo // Attach a submit handler to the form $( "#userForm" ).submit(function( event ) { // Stop form from submitting normally event.preventDefault(); // Get some values from elements on the page: var $form = $( this ), username = $form.find( "input[name='username']" ).val(), url = "//api.github.com/users/"+username+"/repos"; // Send the data using post var posting = $.post( url, { s: term } ); //Ajax Function to send a get request $.ajax({ type: "GET", url: url, dataType:"jsonp" success: function(response){ //if request if made successfully then the response represent the data $( "#result" ).empty().append( response ); } }); });

jQuery.ajax ()

$.post( url [, data ] [, success ] [, dataType ] ) 다음과 같은 축약 형 Ajax 함수입니다.

$.ajax({ type: "POST", url: url, data: data, success: success, dataType: dataType });

$.ajax() 여기에서 찾을 수있는 더 많은 옵션을 제공합니다.

추가 정보:

자세한 내용은 공식 웹 사이트를 참조하세요.