CodeGym/Java курс/Модул 3/Работа в мрежа с jQuery

Работа в мрежа с jQuery

На разположение

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 заявка: GETorPOST
  • Полето 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:

jQuery API

jQuery.ajax()

В допълнение, всички често срещани въпроси се намират лесно в Google и са в StackOverflow.

Коментари
  • Популярен
  • Нов
  • Стар
Трябва да сте влезли, за да оставите коментар
Тази страница все още няма коментари