[AJAX, JQUERY] - AJAX & JQUERY Collection
Tuesday, November 19, 2019
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);
Bài liên quan
Comments[ 0 ]
Post a Comment