Как сделать так что бы страница не перезагружалась при использовании ajax запроса?

Question

[Gimir]

Доброго времени суток! Вот в принципе сразу код функции аякс запроса с промисом:

function makeXHR(url, method, currency) {
  var promiseObj = new new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url);
    const data = new FormData();
    data.append('currency', currency);
    xhr.send(data);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 2000) {
          console.log('xhr done successfully');
          const data = JSON.parse(xhr.responseText);
          resolve(data);
        } else {
          reject(xhr.status);
          console.log('xhr failed');
        }
      } else {
        console.log('xhr processing going on');
      }
    }
    console.log('request sent successfully');
  });
  return promiseObj;
}

Скажите пожалуйста, как сделать так что бы стр-ца не перезагружалась когда я выполняю запрос?
Когда не использовал просисы все делалось легко, просто писал return false после отправки запроса, здесь это не действует, как быть?

Answer 1

[Alex Plotnikov]

Приведите полный код того, как вы вызываете эту функцию.

event.PreventDefault()

Comments

[Gimir]

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('#form').onsubmit = () => {
    var search = document.querySelector('#search').value;
    makeXHR('POST', '/booklist', search).then(showBookList, errorHandler);
  }
});

function showBookList(data) {
  document.querySelector('.result').innerHTML = "";

  for (let i = 0; i < data.length; i++)
  {
    var newA = document.createElement('a')
    newA.className = "show"
    var newD = document.createElement('div')
    var newH2 = document.createElement('h2')
    var newH3 = document.createElement('h3')
    newH2.innerHTML = data[i].title;
    newH3.innerHTML = data[i].author;
    newD.className = 'book'
    newD.appendChild(newH2)
    newD.appendChild(newH3)
    newA.appendChild(newD)
    document.querySelector('.result').appendChild(newA);
  }
}

function errorHandler(status) {
  alert('Process failed whith status ', status);
}

Вот...

[Alex Plotnikov]

Gimir,

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('#form').onsubmit = (event) => {
    event.PreventDefault()
    var search = document.querySelector('#search').value;
    makeXHR('POST', '/booklist', search).then(showBookList, errorHandler);
  }
});

[Gimir]

Alex Plotnikov,
А вы случаем не знаете что это за ошибка?

[Alex Plotnikov]

Gimir,

var promiseObj = new new Promise(function(resolve, reject) {

два раза new

[Gimir]

Alex Plotnikov, спасибо вам за потраченное время и дельные советы, все получилось))

Answer 2

[tempick]

https://learn.javascript.ru/default-browser-action

Comments

[Gimir]

Я уже делал так, у меня стоит событие onsumbit на ссылке и я сперва делал аякс запрос а потом возвращал фолс, не помогло.

[tempick]

у меня сейчас нет времени на код, но у меня была похожая ситуация с jquery post - тогда просто не ставил слеш в конце ссылки. Типа надо чтобы или расширение файла в url было или ,если его нет, добавиь слеш. Может, у вас то же самое?

[ThunderCat]

Gimir,

у меня стоит событие onsumbit на ссылке

А? Чего? Как? Онсубмит? На ссылке???

надо вешать события правильно, используя preventDefault();

[Gimir]

ThunderCat, не правильно выразился, событие стоит на кнопке, в которой ссылка.
Я не имею опыта программирования и не знаю как лучше делать, по этому и спрашиваю у знающих))