jQuery
아약스

통사론

• var jqXHR = $ .ajax (url [, settings])
• var jqXHR = $ .ajax ([settings])
• jqXHR.done (function (data, textStatus, jqXHR) {});
• jqXHR.fail (function (jqXHR, textStatus, errorThrown) {});
• jqXHR.always (function (jqXHR) {});

매개 변수

비고

$ .ajax ()로 HTTP 응답 코드 처리하기

요청이 성공했는지 여부에 따라 트리거되는 .done , .fail 및. .always promise 콜백 외에도 특정 HTTP 상태 코드 가 서버에서 반환 될 때 함수를 트리거하는 옵션이 있습니다. 이는 statusCode 매개 변수를 사용하여 수행 할 수 있습니다.

$.ajax({
    type: {POST or GET or PUT etc.},
    url:  {server.url},
    data: {someData: true},
    statusCode: {
        404: function(responseObject, textStatus, jqXHR) {
            // No content found (404)
            // This code will be executed if the server returns a 404 response
        },
        503: function(responseObject, textStatus, errorThrown) {
            // Service Unavailable (503)
            // This code will be executed if the server returns a 503 response
        }           
    }
})
.done(function(data){
    alert(data);
})
.fail(function(jqXHR, textStatus){
    alert('Something went wrong: ' + textStatus);
})
.always(function(jqXHR, textStatus) {
   alert('Ajax request was finished')
});

공식 jQuery 문서에서 말한 것처럼 :

요청이 성공하면 상태 코드 함수는 success 콜백과 동일한 매개 변수를 사용합니다. 오류 (3xx 리디렉션 포함)가 error 하면 error 콜백과 동일한 매개 변수를 사용합니다.

Ajax를 사용하여 양식 제출

때로는 양식을 가지고 있고 ajax를 사용하여 양식을 제출하기를 원할 수도 있습니다.

이 간단한 형식을 가지고 있다고 가정 해보십시오.

<form id="ajax_form" action="form_action.php">
  <label for="name">Name :</label>
  <input name="name" id="name" type="text" />
  <label for="name">Email :</label>
  <input name="email" id="email" type="text" />
  <input type="submit" value="Submit" />
</form>

다음 jQuery 코드를 사용할 수있다 ( $(document).ready 호출 내에서) -

$('#ajax_form').submit(function(event){
  event.preventDefault();
  var $form = $(this);

  $.ajax({
      type: 'POST',
      url: $form.attr('action'),
      data: $form.serialize(),
      success: function(data) {
        // Do something with the response
      },
      error: function(error) {
        // Do something with the error
      }
  });
});

설명

• var $form = $(this) - 재사용을 위해 캐시 된 양식
• $('#ajax_form').submit(function(event){ - ID "ajax_form"의 폼이 제출되면이 함수를 실행하고 이벤트를 파라미터로 전달합니다.
• event.preventDefault(); - 양식이 정상적으로 제출되지 못하도록합니다. (또는 우리는 ajax({}); 명령문 뒤에 return false 사용할 수 있지만, 동일한 효과가 있습니다)
• url: $form.attr('action'), - 양식의 "action"속성 값을 가져 와서 "url"속성에 사용하십시오.
• data: $form.serialize(), - 양식의 입력을 서버로 보내기에 적합한 문자열로 변환합니다. 이 경우 "name=Bob&[email protected]"과 같은 것을 반환합니다.

JSON 데이터 보내기

jQuery를 사용하면 jSON 응답을 쉽게 처리 할 수 ​​있지만 요청에 따라 JSON 형식으로 데이터를 보내려 는 경우 약간 더 많은 작업이 필요합니다.

 $.ajax("/json-consuming-route", {
      data: JSON.stringify({author: {name: "Bullwinkle J. Moose", 
                                     email: "[email protected]"} }),
      method: "POST",
      contentType: "application/json"
   });

우리가 보내고있는 데이터에 맞는 contentType 을 지정 하고 있음을 관찰하십시오. 이것은 일반적으로 좋은 연습이고 당신이 게시하고있는 API에 의해 요구 될 수있다 -하지만 그것도의 기본 변환을 수행하지 jQuery를 지시의 부작용이 %20 에 + 경우가 할 것, contentType 했습니다 application/x-www-form-urlencoded 의 기본값으로 남겨 application/x-www-form-urlencoded . 어떤 이유로 인해 contentType을 기본값으로 설정해야하는 경우 processData 를 false로 설정하여이 문제를 방지해야합니다.

JSON.stringify 대한 호출은 여기에서 피할 수 있지만이를 사용하면 데이터를 JavaScript 객체 형식으로 제공 할 수 있으므로 속성 이름을 인용하지 않는 등의 JSON 구문 오류가 발생하지 않습니다.

한 가지 예에서 모두

Ajax 가져 오기 :

해결책 1 :

$.get('url.html', function(data){
    $('#update-box').html(data);
});

해결책 2 :

 $.ajax({
     type: 'GET',
     url: 'url.php',  
 }).done(function(data){
     $('#update-box').html(data);
 }).fail(function(jqXHR, textStatus){
     alert('Error occured: ' + textStatus);
 });

Ajax Load : 단순함을 위해 또 다른 Ajax get 메서드를 만든다.

$('#update-box').load('url.html');

.load는 추가 데이터로 호출 할 수도 있습니다. 데이터 부분은 문자열 또는 객체로 제공 될 수 있습니다.

$('#update-box').load('url.php', {data: "something"});
$('#update-box').load('url.php', "data=something");

콜백 메소드로 .load가 호출되면 서버에 대한 요청은 게시물이됩니다.

$('#update-box').load('url.php', {data: "something"}, function(resolve){
    //do something
});

Ajax Post :

해결책 1 :

$.post('url.php', 
    {date1Name: data1Value, date2Name: data2Value},  //data to be posted
    function(data){
        $('#update-box').html(data);
    }
);

해결책 2 :

$.ajax({
    type: 'Post',
    url: 'url.php',  
    data: {date1Name: data1Value, date2Name: data2Value}  //data to be posted
}).done(function(data){
    $('#update-box').html(data);
}).fail(function(jqXHR, textStatus){
    alert('Error occured: ' + textStatus);
});

Ajax 게시 JSON :

var postData = {
    Name: name,
    Address: address,
    Phone: phone
};

$.ajax({
     type: "POST",
     url: "url.php",
     dataType: "json",
     data: JSON.stringfy(postData),
     success: function (data) {
         //here variable data is in JSON format
     }
 });

Ajax JSON 가져 오기 :

해결책 1 :

$.getJSON('url.php', function(data){
    //here variable data is in JSON format
});

해결책 2 :

 $.ajax({
      type: "Get",
      url: "url.php",
      dataType: "json",
      data: JSON.stringfy(postData),
      success: function (data) {
          //here variable data is in JSON format
      },    
      error: function(jqXHR, textStatus){
          alert('Error occured: ' + textStatus);
      }
  });

Ajax 호출 또는 요청 중단

var xhr = $.ajax({
    type: "POST",
    url: "some.php",
    data: "name=John&location=Boston",
    success: function(msg){
       alert( "Data Saved: " + msg );
    }
});

// 요청을 죽입니다.

xhr.abort()

Ajax 파일 업로드

1. 간단한 완전한 예

이 샘플 코드를 사용하여 새 파일을 선택할 때마다 사용자가 선택한 파일을 업로드 할 수 있습니다.

<input type="file" id="file-input" multiple>

var files;
var fdata = new FormData();
$("#file-input").on("change", function (e) {
    files = this.files;

    $.each(files, function (i, file) {
        fdata.append("file" + i, file);
    });

    fdata.append("FullName", "John Doe");
    fdata.append("Gender", "Male");
    fdata.append("Age", "24");

    $.ajax({
        url: "/Test/Url",
        type: "post",
        data: fdata, //add the FormData object to the data parameter
        processData: false, //tell jquery not to process data
        contentType: false, //tell jquery not to set content-type
        success: function (response, status, jqxhr) {
            //handle success
        },
        error: function (jqxhr, status, errorMessage) {
            //handle error
        }
    });
});

이제 이것을 분해하고 부분별로 조사해 봅시다.

2. 파일 입력 작업

이 MDN 문서 (웹 응용 프로그램의 파일 사용) 는 파일 입력을 처리하는 방법에 대한 다양한 방법에 대해 잘 읽은 것입니다. 이 방법 중 일부는이 예제에서도 사용됩니다.

파일을 업로드하기 전에 먼저 업로드 할 파일을 사용자가 선택할 수있는 방법을 제공해야합니다. 이를 위해 file input 을 사용합니다. multiple 속성을 사용하면 둘 이상의 파일을 선택할 수 있으므로 사용자가 한 번에 하나의 파일을 선택하도록하려면 multiple 속성을 제거하면됩니다.

<input type="file" id="file-input" multiple>

입력의 change event 를 사용하여 파일을 캡처합니다.

var files;
$("#file-input").on("change", function(e){
    files = this.files;
});

핸들러 함수 내에서 우리는 입력 파일의 files 속성을 통해 파일에 액세스합니다. 이것은 객체와 같은 배열 인 FileList를 제공합니다.

3. FormData 만들기 및 채우기

Ajax로 파일을 업로드하기 위해 우리는 FormData 를 사용할 것이다.

var fdata = new FormData();

이전 단계에서 얻은 FileList 는 객체와 같은 배열이며 for 루프 , for ... for 루프 및 jQuery.each 를 비롯한 다양한 메소드를 사용하여 반복 할 수 있습니다. 우리는이 예제에서 jQuery를 고수 할 것입니다.

$.each(files, function(i, file) {
  //...
});

FormData의 append 메소드 를 사용하여 formData 객체에 파일을 추가합니다.

$.each(files, function(i, file) {
  fdata.append("file" + i, file);
});

같은 방식으로 보내려는 다른 데이터도 추가 할 수 있습니다. Google은 사용자로부터받은 개인 정보를 파일과 함께 보내려고합니다. 이 정보를 formdata 객체에 추가 할 수 있습니다.

fdata.append("FullName", "John Doe");
fdata.append("Gender", "Male");
fdata.append("Age", "24");
//...

4. Ajax로 파일 보내기

$.ajax({
    url: "/Test/Url",
    type: "post",
    data: fdata, //add the FormData object to the data parameter
    processData: false, //tell jquery not to process data
    contentType: false, //tell jquery not to set content-type
    success: function (response, status, jqxhr) {
        //handle success
    },
    error: function (jqxhr, status, errorMessage) {
        //handle error
    }
});

processData 및 contentType 속성을 false 합니다. 이렇게하면 파일을 서버로 보내고 서버에서 올바르게 처리 할 수 ​​있습니다.