Hồ Quốc Trí

AJAX/JQUERY

I. AJAX Basic
function loadDoc() {
    var xhttp = new XMLHttpRequest();

    xhttp.onreadyStatechange = function() {
        if (this.readyState==4 && this.status == 200) {
          
            // this.responseText: response data from url.
            // $.parseJSON(data): parse string to JSON data.
      
            var jsonData = $.parseJSON(this.responseText);
          
            // $('.class'): addressed class in HTML.
            // $('#id'): addressed id in HTML.
            // $('#id').text(data): set data to this ID or class.
            // $('#id').append(data): append data to this ID or class.
            $('.full-name').text(jsonData.full_name);
            $('#full-name').text(jsonData.full_name);
            $('.full-name').append(jsonData.full_name);
          
            //clear data
            top.$('.full-name').text("");
        }
    };
  
    xhttp.open("GET", "url", true);
    xhttp.setRequestHeader("Content-type", "application/json");
    xhttp.send;  
}

AJAX-Jquery:

$.ajax({
 url: <url>,
 type: <GET, POST, PUT,...>,
 async: <true, false>,
 dataType: <text, json,xml,...>,
 data: { //paramter for sending....
 },
 success:function(data, status, xhr) {
  //get data here
 }
 
 
});

Ex:
var test = ajax(); // test maybe doesn't have value because of async = true,
funtion ajax(){
 .....
 async: true,
 .....
 success:function(data, status, xhr) {
  return data;
 }
}
var test = ajax(); //test will be have data.
funtion ajax(){
 var result;
 var response = $.ajax({
  url: <url>,
  type: <GET, POST, PUT,...>,
  async: false,
  dataType: <text, json,xml,...>,
  data: { //paramter for sending....
  },
  success:function(data, status, xhr) {
   //get data here
   result = data;
  }
 });
 
 if (result) {
  return result;
 }
}

=========================================================================
JQUERY
#clear elements
$("elements").remove();

#remove value on form
$("#form_ID").trigger('reset');

// set checked of Selection box
#(element).prop("checked", true/false);

Read more…