Git Product home page Git Product logo

es6-wp-ajax-demo's Introduction

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/.

es6-wp-ajax-demo's People

Contributors

soderlind avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.