Skip to content

Instantly share code, notes, and snippets.

@leepeterson
Forked from jtsternberg/ajax-endpoint.js
Created February 21, 2020 06:33
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save leepeterson/2d7fe36a9f247d8baf41f5605488a0a5 to your computer and use it in GitHub Desktop.
Save leepeterson/2d7fe36a9f247d8baf41f5605488a0a5 to your computer and use it in GitHub Desktop.
Proof of concept for avoiding admin-ajax for ajax callback requests. Also see Thomas Griffin's excellent post: https://thomasgriffin.io/a-creative-approach-to-efficient-and-scalable-wordpress-api-endpoints/ AND Josh Pollock's excellent post: http://torquemag.io/improved-wordpress-front-end-ajax-processing/
jQuery(document).ready(function($){
$('body').on( 'click', '.some-button', function(){
$.ajax( ajax_endpoint_data.api_url, {
type : 'POST',
dataType : 'json',
data : {
action: 'ajax_action',
some_data: 'some_value'
}
}).always( function() {
// Hide your spinner
}).done( function( response ) {
if ( ! response.success ) {
// Display error message, ajax_endpoint_data.error_text
}
// Happy Path! Do your success message
}).fail( function() {
// Display error message, ajax_endpoint_data.error_text
});
});
});
<?php
class Ajax_Endpoint {
/**
* The nonce key to verify if we should do our ajax api endpoint action
*
* @since 1.0.0
*
* @var string
*/
public $api_nonce_key = 'ajax-endpoint-nonce';
public function __construct() {
// late enough that cpts/custom taxonomies are registered
add_action( 'init', array( $this, 'ajax_endpoint_api' ), 99 );
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_js' ) );
}
/**
* Detects if we're trying to make our front-end ajax api call
* This can occur even higher in the load the stack if you don't
* need custom post types or custom taxonomies
*/
public function ajax_endpoint_api() {
// are we on the api endpoint?
if (
// Do we have all our request vars???
! isset(
$_SERVER['REQUEST_URI'],
$_REQUEST['ajax_action'],
$_REQUEST['some_data'],
$_REQUEST[ $this->api_nonce_key ]
)
// Are we looking at our front-end ajax api endpoint?
|| 0 !== strpos( $_SERVER['REQUEST_URI'], '/ajax-endpoint-api' )
// Are our request vars empty???
|| ! $_REQUEST['ajax_action'] || ! $_REQUEST['some_data']
// Did we pass the nonce test?
|| ! wp_verify_nonce( $_REQUEST[ $this->api_nonce_key ], $this->api_nonce_key )
) {
// Looks like we failed, so don't do anything (probably will land on a 404)
return;
}
// Now you can do your business logic
if ( $some_condition == $_REQUEST['some_data'] ) {
wp_send_json_success( 'You did it!' );
}
wp_send_json_error( 'Condition failed. :(' );
}
/**
* Enqueues/Localizes
* Pay attention to the api_url, that's important
*/
public function enqueue_js() {
$min = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
wp_enqueue_script( 'ajax-endpoint-js', $plugin_url . "assets/js/ajax-endpoint$min.js", array( 'jquery' ), 'version' );
wp_localize_script( 'ajax-endpoint-js', 'ajax_endpoint_data', array(
'debug' => ! $min,
'api_url' => wp_nonce_url( site_url( 'ajax-endpoint-api' ), $this->api_nonce_key, $this->api_nonce_key ),
'error_text' => 'Error Text',
'success_text' => 'Success!',
) );
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment