Question posted in
You can find the official documentation here.

Convert jQuery ajax call with jQuery().serialize to vanilla JavaScript

I have been working on converting a jQuery script to vanilla JavaScript so I can ditch jQuery all together. The code does the following:

When a user clicks a button on the front end, it sends an ajax request, updates the database (or deletes from) and changes the text and the count on the frontend. I have gotten most of the jQuery removed but never written ajax requests in vanilla JavaScript. I have seen some examples of the basic structure but not anything related to the serialize function for vanilla.

document.addEventListener('DOMContentLoaded', function() {

  var elementFB = document.querySelector('#follow_button');
  var elementFC = document.querySelector('#follow_count');
  var elementFT = document.querySelector('#follow_text');

  elementFB.addEventListener('click', function (event) {

    var elementBF = document.querySelector('.wpstp_button_follow');
    var elementBUF = document.querySelector('.wpstp_button_unfollow');

    if ( elementBF !== null ) {
      jQuery.ajax({
        type: 'POST',
        url: ajaxurl+"?action=wpstp_follow",
        data: jQuery('#wpstp_form').serialize(),
        dataType: "text",
        success: function(response) {
          var count = Number(elementFC.textContent);
          var newCount = count + 1;                                  
          elementFC.innerHTML = newCount;
          elementFT.innerHTML = 'Unfollow';
          elementFB.classList.remove('wpstp_button_follow');
          elementFB.classList.add('wpstp_button_unfollow');
        }
      });
    }

    if ( elementBUF !== null ) {
      jQuery.ajax({
        type: 'POST',
        url: ajaxurl+"?action=wpstp_unfollow",
        data: jQuery('#wpstp_form').serialize(),
        dataType: "text",
        success: function(response) {
          var count = Number(elementFC.textContent);
          var newCount = count - 1;     
          elementFC.innerHTML = newCount;
          elementFT.innerHTML = 'Follow';
          elementFB.classList.remove('wpstp_button_unfollow');
          elementFB.classList.add('wpstp_button_follow');
        }
      });
    }
  });
});

If anything else can be improved, which I am sure it can, I would appreciate the feedback as well.

EDIT: The accepted answer pointed me in the right direction and I am updating my code with what is working now.

document.addEventListener('DOMContentLoaded', function() {

  var elementFB = document.querySelector('#follow_button');
  var elementFC = document.querySelector('#follow_count');
  var elementFT = document.querySelector('#follow_text');

  elementFB.addEventListener('click', function (event) {

    var elementBF = document.querySelector('.wpstp_button_follow');
    var elementBUF = document.querySelector('.wpstp_button_unfollow');

    if ( elementBF !== null ) {
      const formdata = new FormData(document.querySelector('#wpstp_form'));
      const params = new URLSearchParams(formdata);
      const opts = {
        method: 'POST',
        body: params
      }

      fetch(ajaxurl+'?action=wpstp_follow', opts).then(res => {
        if (!res.ok) {
          throw new Error('Network response was not ok');
        }
        return res.text();
      }).then(data => {
        var count = Number(elementFC.textContent);
        count++;                               
        elementFC.innerHTML = count;
        elementFT.innerHTML = 'Unfollow';
        elementFB.classList.remove('wpstp_button_follow');
        elementFB.classList.add('wpstp_button_unfollow');
      }).catch(err => console.log(err));
    }

    if ( elementBUF !== null ) {
      const formdata = new FormData(document.querySelector('#wpstp_form'));
      const params = new URLSearchParams(formdata);
      const opts = {
        method: 'POST',
        body: params
      }

      fetch(ajaxurl+'?action=wpstp_unfollow', opts).then(res => {
        if (!res.ok) {
          throw new Error('Network response was not ok');
        }
        return res.text();
      }).then(data => {
        var count = Number(elementFC.textContent);
        count--;                               
        elementFC.innerHTML = count;
        elementFT.innerHTML = 'Follow';
        elementFB.classList.remove('wpstp_button_unfollow');
        elementFB.classList.add('wpstp_button_follow');
      }).catch(err => console.log(err));
    }
  });
});
Tags:

2

Answers


  1. 0

    You’re on the right track, you can use XHR or fetch() to replace the jQuery.ajax request.

    Login or Signup to reply.
  2. 0

    You can use FormData and URLSearchParams APIs together to do the equivalent of serialize() and send the data using fetch()

    const formdata = new FormData(document.querySelector('form'));

const params = new URLSearchParams(formdata);
console.log('Serialized data:', params.toString())

const opts = {
  method: 'POST',
  body: params
}

fetch('https://ptsv2.com/t/92m0t-1619835564/post', opts).then(res => {
  if (!res.ok) {
    throw new Error('Network response was not ok');
  }
  return res.text();
}).then(data => {
  console.log('Message from test site: ', data);
}).catch(err => console.log(err))
    <form>
  <input name="fname" value="foo" />
  <input name="lname" value="bar" />
  <textarea name="message">Some stuff</textarea>

</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search