1

Хочу сделать GET запрос с данными из атрибутов, как это можно сделать с помощью AJAX?

var xhr = new XMLHttpRequest();
xhr.onload = function() {
    xhr.open('GET', 'index.php', true);
    xhr.send(1);
};
<div data-num='1'>1</div>
<div data-num='2'>2</div>
<div data-num='3'>3</div>

1 ответ 1

1

Я хочу сделать GET запрос с данными из дата атрибутов, как это можно сделать с помощью AJAX?

Используйте fetch.

  1. Пример с GET:

var divs = document.querySelectorAll('div');
var fdata = '';

divs.forEach(function(v, i) {
  // Сборка JSON не самый оптимизированый вариант
  fdata += `data-num${i + 1}=${v.getAttribute('data-num')}`;
  if (i < divs.length - 1)
    fdata += '&';
})
console.log(fdata); // Debbug 
// Пример того что это работает
var url = 'https://jsonplaceholder.typicode.com/comments?postId=1';
//var url = 'your-site.some/com?' + fdata; // Ваша ссылка будет тут
fetch(url)
  .then(res => res.json())
  .then(res => console.log(res))
  .catch(function(error) {
    console.log('Request failed', error);
  });
<div data-num='1'>1</div>
<div data-num='2'>2</div>
<div data-num='3'>3</div>


  1. Пример с POST:
    var divs = document.querySelectorAll('div');
    var fdata = [];
    
    divs.forEach(function(v, i) {
      // Create JSON
      fdata[i] = {
        'data-num': v.getAttribute('data-num')
      };
    })
    console.log(fdata); // Debbug 
    // 
    var url = 'https://jsonplaceholder.typicode.com/posts';
    fetch(url, {
        method: 'post',
        body: JSON.stringify(fdata)
      })
      .then(res => res.json())
      .then(function(data) { // Response is increasing number
        console.log('Request succeeded with JSON response', data);
      })
      .catch(function(error) {
        console.log('Request failed', error);
      });
    <div data-num='1'>1</div>
    <div data-num='2'>2</div>
    <div data-num='3'>3</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.