How to Perform AJAX Request in WordPress 11 comments

Hi all, we meet again with our new #technical post. AJAX has been an interesting technology to make our website looks more interactive and effectively decrease the server load by reducing page refresh. However, it is quite tricky to pull this trick on WordPress but fret not, we’ll show you how to do so. There are numbers of workaround to achieve this and what we’re showing here is one of them.

Define your AJAX url in the javascript:

var ajax_url = '<?php bloginfo('url') ?>/?tbajax';

This is where you define to use AJAX request and we’re using jQuery.ajax():

$.ajax({
	url: ajax_url, // path to ajax
	data: 'a=foo&data=your_data', // data to be send
	dataType: 'json', // default 'html'
	beforeSend: function() {
		alert('Sending...'); // you can do anything before sending within this function
	},
	success: function(data) {
		if(data.status=='ok') {
			alert('Successfully processed');
		}
		else {
			alert('Process failed!');
		}
	}
});

In your ‘functions.php’ file, put this code to load ‘ajax.php’ file where you want to process the data:

// if request for ajax is exists
if ( isset( $_REQUEST['tbajax'] ) ) {
	require_once( TEMPLATEPATH . 'ajax.php' );
	die();
}

In your ‘ajax.php’ file, build your structure to process the data and return as JSON format (you can also return as HTML but we prefer JSON):

// ajax.php

$a = sanitize( $_GET['a'] ); // capture the value and create your own 'sanitize' function

switch($a) {
	case 'foo':
		$data = sanitize( $_GET['data'] );

		$arr = array();
		$success = false;

		// your process here

		if($success) {
			$arr = array('status'=>'ok', 'response'=>'your-success-response-text');
		}
		else {
			$arr = array('status'=>'fail', 'response'=>'your-failed-response-text');
		}

		echo json_encode( $arr );
	break;
}

That’s all, easy and straightforward. We’re not sure whether this is the right workaround to process data via AJAX but it works for us.

If you find this article useful, please share it and if there’s a simpler and optimized method, feel free to share it on the comment area below. Thanks ツ

Stay tuned for more news and follow us on Twitter and Facebook. Also subscribe to our Feeds and have the updates mailed to your mailbox.

11 Comments

ChristianLouboutin

Hello everyone thanks for

good information.
on Jun 2, 2010 at 8:54 pm
admin

Hello Christian, you’re welcome. Thanks for visiting us ツ
on Jun 2, 2010 at 9:50 pm
sunglasses shop

i am happy to find it thanks for sharing it here. Nice work.
on Jun 4, 2010 at 11:27 pm
admin

No problem ツ
on Jun 5, 2010 at 12:27 pm
sunglasses shop

great information you write it very clean. I’m very lucky to get

this details from you.
on Jun 5, 2010 at 11:02 pm
best Electronic Cigarette

Very nice, I would send this page to my friend.
on Jun 7, 2010 at 5:13 pm
Christian Louboutin

nice to be here…. thanks for share
on Jun 10, 2010 at 3:35 pm
admin

Welcome, sharing is caring ツ
on Jun 12, 2010 at 11:53 am
Motorcycle Fairing

Hi there

Thanks for sharing, I have digged this post
on Dec 2, 2010 at 4:33 pm
admin

Welcome. Appreciate that ツ
on Dec 2, 2010 at 7:21 pm