How would I do this ajax jquery in vanilla JS?

Question

I'm trying to write this jQuery ajax POST request in Vanilla JS; it initially is:

$.ajax({
      method: 'POST',
      url: window.location.href + 'email',
      data: {
        toEmail: to, //var set elsewhere
        fromName: from, //var set elsewhere
        message: message, //var set elsewhere
        recaptcha: recaptcha //var set elsewhere
      }
    })
    .done(function (data) {
      handleResponse(data, form)
    })
    .fail(function (error) {
      console.error(error)
      alert('Couldn't send your email. Try again later.')
    })

handleResponse is

  function handleResponse (data, form) {
    if (!data.message) return

    if (!form) return

    const responseMessage = form.querySelector('[email-response]')
    const formData = form.querySelector('[email-data]')

    if ('success' === data.message) {
      responseMessage.classList.remove('error')
      responseMessage.classList.add('success')
      responseMessage.innerText = 'Success! Email has been sent.'
      formData.classList.add('hidden')
      return
    }

    return handleError(responseMessage, data)
  }

However, I tried to convert the Ajax part to:

var req = new XMLHttpRequest();
    req.onLoad = function(e){
      resolve(req.response);
    }
    req.onerror = function(e){
      console.log(e);
      alert('Couldn't send your email. Try again later.')
    };
    var data = {
        toEmail: to, //var set elsewhere
        fromName: from, //var set elsewhere
        message: message, //var set elsewhere
        recaptcha: recaptcha //var set elsewhere
      }
    }
    var url = window.location.href + 'email';
    req.open("POST",url,true);
    req.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    req.send(data);

I get a console error saying req is not defined What am I doing incorrectly? How can I do the jQuery ajax request in vanilla JS properly?

Replace your single quotes from your alert to double quotes. — Vimal Patel
– Vimal Patel, Commented Oct 30, 2020 at 17:10
Check out the Fetch API - developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch — user2182349
– user2182349, Commented Oct 30, 2020 at 17:37

Dharman · Accepted Answer · 2020-10-30 17:47:40Z

15

You should use fetch API:

const url = `${window.location.href}email`;

const payload = {
  toEmail: to, //var set elsewhere
  fromName: from, //var set elsewhere
  message: message, //var set elsewhere
  recaptcha: recaptcha //var set elsewhere
};

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(payload),
})
  .then((response) => {
    if (!response.ok) {
      throw Error(response.statusText);
    }
    return response;
  })
  .then((response) => response.json())
  .then((data) => {
    handleResponse(data, form);
  })
  .catch((error) => {
    console.error(error);
    alert('Couldn't send your email. Try again later.');
  });

fetch returns a promise, and work with text in the response, if you would like to use something more automatic try out Axios.

edited Oct 30, 2020 at 17:47

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Oct 30, 2020 at 17:41

DrWaky

1,3451 gold badge9 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sarkar · Accepted Answer · 2020-10-30 17:24:57Z

in Vanilla js you can Use XHRHttpRequest

var http = new XMLHttpRequest();
var url = 'your url';
var params = 'orem=ipsum&name=binny';
http.open('POST', url, true);

//Send the proper header information along with the request
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

http.onreadystatechange = function() {//Call a function when the state changes.
    if(http.readyState == 4 && http.status == 200) {

        // http.responseText will be anything that the server return
        alert(http.responseText);
    }
}
http.send(params);

or if you went pass an object you can use FormData

var http = new XMLHttpRequest();
var url = 'your urk';
var myForm = new FormData()

myForm.append('foo', 'bar')

http.open('POST', url, true);

http.onreadystatechange = function() {//Call a function when the state changes.
    if(http.readyState == 4 && http.status == 200) {

        // http.responseText will be anything that the server return
        alert(http.responseText);
    }
}
http.send(myForm);

Collectives™ on Stack Overflow

How would I do this ajax jquery in vanilla JS?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related