9.1 $ обект и ajax метод в jQuery
jQuery има и специален глобален обект за работа с мрежата. Както се досещате, тя се нарича $
. Да, това е името. Но е просто и удобно.
Да приемем, че искате да изпратите заявка до API във вашия JavaScript и да обработите получения отговор. Това може да стане по следния начин:
$.ajax({
type: "POST",
url: "api.codegym.cc",
data: {name: 'Bill', location: 'Radmond'},
success: function(msg){
alert( "Person found: " + msg );
}
});
Това е всичко, това е целият code. $
Извикваме метода на обекта ajax()
, където предаваме обекта, който описва всичко, от което се нуждаем: Howто заявката, така и отговорът.
- Полето
type
указва типа HTTP заявка:GET
orPOST
- Полето
url
указваurl
към кого ще бъде изпратена заявката. - Полето
data
посочва данните на заявката във формат JSON - Полето за успех указва функция, която да бъде извикана след успешен отговор от сървъра.
9.2 Полезни запитвания
Но ако не е необходимо да прехвърляте ниHowви данни, тогава заявката може да бъде написана дори по-кратка. Например, можете да напишете проста POST заявка като тази :
$.post("ajax/test.html", function( data ) {
$( ".result" ).html( data );
});
Знаете ли Howво прави codeът $( ".result" ).html( data );
? Нека се опитаме да познаем...
Той намира елемент с резултатния клас в documentа и добавя HTML code вътре в него - данни data
. Така че в няколко реда можете да изтеглите данни от сървъра и да ги добавите към pageта си. Е, не е ли красота? :)
Заявката GET може да бъде написана и в няколко реда:
$.get("ajax/test.html"., function( data ) {
$( ".result" ).html( data );
});
Искате ли да изтеглите и изпълните скрипт?
$.ajax({
method: "GET",
url: "test.js",
dataType: "script"
});
Получаване на най-новата HTML page?
$.ajax({
url: "test.html",
cache: false
})
.done(function( html ) {
$( "#results" ).append( html );
});
В интернет има много добра documentация за jQuery:
В допълнение, всички често срещани въпроси се намират лесно в Google и са в StackOverflow.
GO TO FULL VERSION