Лекции
Начать
Начать обучение
JavaRush /Курсы /JSP & Servlets /Работа с сетью через jQuery

Работа с сетью через jQuery

JSP & Servlets
7 уровень , 8 лекция
Открыта

9.1 Объект $ и метод ajax в jQuery

У jQuery так же есть специальный глобальный объект для работы с сетью. Как ты можешь догадаться, называется он $. Да, вот такое имя. Зато просто и удобно.

Допустим, ты хочешь в своем JavaScript отправить запрос на API и обработать полученный ответ. Это можно сделать так:


$.ajax({
  type: "POST",
  url: "api.javarush.ru",
  data: {name: 'Bill', location: 'Radmond'},
  success: function(msg){ alert( "Person found: " + msg ); }
});
Python-университет

Все, это весь код. У объекта $ мы вызываем метод ajax(), куда передаем объект, который описывает все что нам нужно: и запрос, и ответ.

  • Поле type задает тип HTTP-запроса: GET или POST
  • Поле url задает url, на который будет отправлен запрос
  • Поле data задает данные запроса в формате JSON
  • Поле success задает функцию, которую нужно будет вызвать после того, как придет успешный ответ от сервера.

9.2 Полезные запросы

А ведь если не нужно передавать никаких данных, то запрос можно записать еще короче. Например, так можно записать простой POST-запрос:


$.post("ajax/test.html", function( data ) { $( ".result" ).html( data ); });

А знаешь что делает код $( ".result" ).html( data );? Попробуем догадаться…

Он находит в документе элемент с классом result, и добавляет ему внутрь HTML-код — данные data. Так за пару строчек ты можешь загрузить данные с сервера и добавить их в свою страницу. Ну не красота разве? :)

GET-запрос тоже можно написать в пару строк:


$.get("ajax/test.html"., function( data ) { $( ".result" ).html( data ); });

Хочешь загрузить и выполнить скрипт?


$.ajax({
  method: "GET",
  url: "test.js",
 dataType: "script"
});

Получить последнюю версию HTML-страницы?


$.ajax({
  url: "test.html",
 cache: false
})
  .done(function( html ) {
 $( "#results" ).append( html );
  });

В интернете есть очень хорошая документация по jQuery:

jQuery API

jQuery.ajax()

Кроме того, все распространенные вопросы легко гуглятся и есть на StackOverflow.

JavaScript + jQuery

Комментарии (9)
ЧТОБЫ ПОСМОТРЕТЬ ВСЕ КОММЕНТАРИИ ИЛИ ОСТАВИТЬ КОММЕНТАРИЙ,
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ
Irina B. Уровень 41
4 сентября 2025
Видео уроки классные, очень помогают понять что вообще здесь происходит. Спасибо!
Алексей Уровень 115
21 мая 2025
Хотелось бы дополнить: В настоящий момент в JS 7 примитивных типов и один ссылочный. Итого 8: Number, Boolean, String, Symbol, Undefined, Null. BigInt - относительно новый. ECMAScript 2020 Object - единственный ссылочный тип, в принципе, как и в Java.
dimm Уровень 42
13 июня 2024
В начале про JS сгущали краски: "ужасный, кривой, неудобный жаваскрипт". В конце: "смотрите как все быстро и легко получается".
Роман Уровень 106 Expert
21 апреля 2024
Уважаемые админы, этот уровень просто в каждой главе содержит кучу глупых ошибок в тексте. Огромная просьба, перечитать написанное и исправить, ибо в моменте дольше перечитываешь сочетание слов, чем вникаешь в суть.
Олег Уровень 79 Expert
8 января 2024
Вот уж не думал что JS за пол часа выучу......
jvatechs Уровень 111 Expert
29 мая 2023
Хорошо было бы создать какой-то тестовый сервер на JavaRush с соответствующими заданиями, и потренироваться с этими запросами, а то по сути голая теория без практики.
Anonymous #2957882 Уровень 1
20 августа 2022 

$.get("https://api.waifu.pics/sfw/waifu", function (data) {
    var img = document.createElement("img");
    img.src = data.url;
    var body = document.querySelector("body");
    body.appendChild(img);
});
Пример согласно документации https://api.jquery.com/jQuery.get/ чур на nsfw не менять 😈
Anonymous #2957882 Уровень 1
20 августа 2022
Еще замечание по прошлому разделу, так как указано добавление скрипта не работало, сработало 

<script src="https://code.jquery.com/jquery-3.6.0.min.js" ></script>
    <script src="script.js" ></script>
Anonymous #2957882 Уровень 1
20 августа 2022 

$.ajax({
  url: "https://api.waifu.pics/sfw/waifu",
})
    .done(function (data) {
    var img = document.createElement("img");
    img.src = data.url;
    $( "body" ).append(img);
  });
https://api.jquery.com/jquery.ajax/