Js ajax: AJAX для новичков / Хабр

Содержание

javascript — Помогите переписать AJAX запрос на чистый JS

Задать вопрос

Вопрос задан
4 месяца назад

Изменён
4 месяца назад

Просмотрен
62 раза

Я не силен в JS пока что, но нужно выполнить заказ и только из-за одного запроса не хочется подключать JQuery к сайту. Помогите переписать в JS пожалуйста

  $('.ajax-post').click(function (e) {
  
    e.preventDefault()
    var post_id = $(this).attr('id')
    $.ajax({
      cache: false,
      timeout: 8000,
      url: php_array.admin_ajax,
      type: 'POST',
      data: { action: 'theme_post_example', id: post_id },
      success: function (data, textStatus, jqXHR) {
        var $ajax_response = $(data)
        $('#ajax-response'). html($ajax_response)
      },
      error: function (jqXHR, textStatus, errorThrown) {
        console.log('The following error occured: ' + textStatus, errorThrown)
      },
      complete: function (jqXHR, textStatus) {},
    })
  })
})

javascript
jquery
ajax

const ajaxPost = document.querySelectorAll('.ajax-post')
ajaxPost.forEach((el) => {
  el.addEventListener('click', (e) => {
    e.preventDefault()
    const url = php.admin_ajax
    const data = new FormData()
    let post_id = e.target.getAttribute('id')
    data.append('action', 'theme_post_modal')
    data.append('id', post_id)
    fetch(url, {
      method: 'POST',
      body: data,
    })
      .then(
        (response) => response.text(), // Возвращаем текст из промиса
        (reject) => console.error('Fetch отклонён') // Обрабатываем ошибку
      )
      .catch() // перехватываем ошибку сервер
      . then(
        (text) => {
          document.querySelector('#ajax-response').innerHTML = text
        },
        (reject) => console.error('Ошибка на клиенте')
      )
      .catch() // перехватываем ошибку фронтенда
  })
})

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

JavaScript для профессионалов.

AJAX и HTTP протокол

Главная >
Каталог >
JavaScript Базовый 2015 >
AJAX и HTTP протокол

Для прохождения теста нужно авторизироваться

Войти Регистрация

Вы открыли доступ к тесту! Пройти тест

Войдите или зарегестрируйтесь для того чтоб продолжить просмотр бесплатного видео

Войти Регистрация

№1

Знакомство с курсом JavaScript Advanced

0:03:11

Материалы урокаДомашние заданияТестирование

Видео курс JavaScript Advanced позволит вам углубится в изучение языка JavaScript. Программа обучения состоит из 10-ти уроков, на протяжении которых детально рассматриваются принципы работы с объектами, документами, CSS, событиями, формами, Cookies, графикой. Каждый урок насыщен как теорией, так и практикой. По завершению интенсивного обучения вы сможете создавать более эффективные веб-решения и повысите свою стоимость в глазах работодателя.

№2

Конструкторы и прототипы

1:41:14

Материалы урокаДомашние заданияТестирование

В видео уроке рассматриваться следующие темы:

Основные конструкторы – Object(), Array(), Function(), Date(), String(). Принцип работы конструкторов, назначение ключевого слова this в конструкторе.
Создание пользовательских конструкторов.
Что такое прототип, использование прототипов и добавление свойств и методов в прототип.
Работа с конструктором Object
Объектно-ориентированные техники в языке JavaScript. Реализация наследования в JavaScript.

Работа с документами.

1:43:50

Материалы урокаДомашние заданияТестирование

В видео уроке рассматриваться следующие темы:

Способы подключения JavaScript сценариев к HTML документу.
Создание сценариев (модулей), которые добавляют минимальное количество глобальных переменных.
Использование свойств объекта document. Методы для получения объектов со страницы.
DOM – Document Object Model, примеры создания новых узлов, манипулирование существующими узлами, удаление узлов.

Объект window. Регулярные выражения.

1:27:15

Материалы урокаДомашние заданияТестирование

В видео уроке рассматриваться следующие темы:

Создание и использование таймеров, использование функций setInterval и setTimeout в языке JavaScript
Использование Location
Использование объекта Navigator
Создание всплывающих окон с помощью JavaScript кода.
Работа с типом данных string. Методы для работы со строковыми значениями.
Регулярные выражения в языке JavaScript. Синтаксис и методы, которые могут работать с регулярными выражениями.

JavaScript и CSS

1:07:31

Материалы урокаДомашние заданияТестирование

В видео уроке рассматриваться следующие темы:

Основы работы с CSS. Создание CSS правил и подключение правил к HTML документам.
Рассмотрение отдельных CSS свойств, которые часто используются при создании динамических страниц.
Способы изменения CSS стилей через JavaScript код. Работа с вычисляемыми стилями (computed styles).

События и обработка событий (Часть 1)

1:10:06

Материалы урокаДомашние заданияТестирование

В видео уроке рассматриваться следующие темы:

Модель обработки события DOM Level 0. Варианты создания обработчиков, преимущества и недостатки.
Модель обработки события DOM Level 2. Маршрутизация события, контроль распространения события по дереву разметки с помощью методов stopPropagation() и preventDefault()
Модель обработки событий Internet Explorer.

События и обработка событий (Часть 2)

0:47:56

Материалы урокаДомашние заданияТестирование

В видео уроке рассматриваться следующие темы:

Интерфейс объекта события (Event)
События мыши.
Обработка событий клавиатуры.
Примеры обработки событий.

Формы и элементы формы

1:08:42

Материалы урокаДомашние заданияТестирование

В видео уроке рассматриваться следующие темы:

Элемент form, его назначение и способы получения к нему доступа с помощью JavaScript кода.
Элемент input, свойства и типы элементов.
Примеры проверки (валидации) данных введенных пользователем в форму.
Пример использования объекта Date для работы с датой и временем.

Cookies и сохранение данных на стороне клиента

0:45:56

Материалы урокаДомашние заданияТестирование

В видео уроке рассматриваться следующие темы:

Назначение cookies рассмотрение принципов хранения данных на стороне клиента.
Свойство cookie объекта document. Примеры создания, удаления и изменения значений.
Другие механизмы хранения данных на стороне клиента — WebStorage, использование свойств localStorage и sessionStorage.

Работа с графикой на стороне клиента

1:00:15

Материалы урокаДомашние заданияТестирование

В видео уроке рассматриваться следующие темы:

Элемент img, способы получения объекта элемента с изображением и основные его свойства.
Примеры предварительной загрузки изображений с сервера.
Создание графики на стороне клиента с помощью CSS.
Создание графики на стороне клиента с помощью SVG.
Создание графики на стороне клиента с помощью Canvas(HTML5).

AJAX и HTTP протокол

1:06:39

Материалы урокаДомашние заданияТестирование

В видео уроке рассматриваться следующие темы:

Основы работы веб приложений. Разбор протокола HTTP. Использование приложения Fiddler для откладки HTTP запросов.
AJAX – Asynchronous JavaScript And XML.
Использование объекта XMLHttpRequest для создания синхронных и асинхронных HTTP запросов.
Использование XMLHttpRequest для отправки данных с POST и GET запросами.
Примеры простого AJAX приложения.

ПОКАЗАТЬ ВСЕ

основные темы, рассматриваемые на уроке