Skip to content

soderlind/es6-wp-ajax-demo

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Sep 4, 2020

WordPress Ajax using native JavaScript

A more modern approach is WordPress REST using native JavaScript

Prerequisite

You should know how WordPress does Ajax.

Look at the code

I recommend that you take a look at the code, it's not hard to understand what's happening.

JavaScript (ES6)

First I create the data object using FormData.

const data = new FormData();
data.append('action', 'es6_ajax_action');
data.append('nonce', pluginES6WPAjax.nonce);
data.append('sum', self.dataset.sum);

Then I use aync/await with fetch to do the ajax call.

const response = await fetch(url, {
	method: 'POST',
	credentials: 'same-origin',
	body: data
});

const res = await response.json();
if (res.response == 'success') {
	self.dataset.sum = res.data;
	output.innerHTML = res.data;
	console.log(res);
} else {
	console.error(res);
}

Note: previous release use fetch().then().catch()

Note 2: Why move from fetch().then().catch() to async/await? Because V8 ..

favor async functions and await over hand-written promise code

  • V8 dev blog

PHP

The PHP code is more or less the same as you would do when using jQuery, but I've added the fetch polyfill

// Load the fetch polyfill, url via https://polyfill.io/v3/url-builder/.
wp_enqueue_script( 'polyfill-fetch',
	'https://polyfill.io/v3/polyfill.min.js?features=fetch',
	[],
	ES6_WP_AJAX_DEMO_VERSION,
	true
);

Demo

Not very exciting, the demo increments a number when you click on a button.

Installation

  • Download the plugin
  • Install and activate the plugin.
  • Add the [es6demo] shortcode to a page.
  • Click on the + button to increment the number.

Copyright and License

es6-wp-ajax-demo is copyright 2019 Per Soderlind

es6-wp-ajax-demo is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 2 of the License, or (at your option) any later version.

es6-wp-ajax-demo is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU Lesser General Public License along with the Extension. If not, see http://www.gnu.org/licenses/.

About

WordPress Ajax using native JavaScript

Resources

Stars

Watchers

Forks

Sponsor this project

Packages

No packages published