This is a proof of concept (POC) to stablish a methodology to quick access PHP and Wordpress method from Javascript. Security should be a concern, since the methodology allows accessing the server terminal command which is not a desire scenario if the methodoloy is enabled for a non-trusted user.
This is exploratory only.
add_action( 'wp_ajax_nopriv_expose', function() {
$params = empty($_POST['params'])? [] : $_POST['params'];
$data = call_user_func_array($_POST['method'], $params);
$response['success'] = true;
$response['message'] = 'success';
$response['data'] = $data;
header('Content-type: application/json');
echo json_encode($response, JSON_PRETTY_PRINT);
exit;
}, 1);
<script src="resources/js/appcropolis.expose.js"></script>
var wp = new WP();
$('#get_post').click(function() {
var post_id = 2; // sample-page post
wp.get_post(post_id).then(data=>{
console.log(data);
});
});
wp.debug = true;
wp.get_post(3).then(data=>{
console.log(data);
});
(async function(){
var post = await get_post(2);
console.log(post);
})();
wp.get_option('site_url').then(data=>{
console.log(data);
});
wp.get_option('site_url').then(data=>{
console.log(data);
});
wp.date('Y-m-d H:i:s').then(data=>{
console.log(data);
});
wp.expose('scandir', window);
scandir('././').then(data=>{
console.log(data);
});
wp.expose('scandir', window, 'getDirectoryConent');
getDirectoryConent('././').then(data=>{
console.log(data);
});
wp.run('exec', ['ls -al']);
var myApp = {}
wp.expose('scandir', myApp);
myApp.scandir('./').then(data=>{
console.log(data);
});
PHP code (add to functions.php):
function hello($name='Guest') {
$response['success'] = true;
$response['message'] = 'success';
$response['data'] = 'Hello, ' . $name;
header('Content-type: application/json');
echo json_encode($response, JSON_PRETTY_PRINT);
exit;
}
Javascript code:
wp.run('hello', ['Raul']).then(data=>{
console.log(data); // outputs "Hello, Raul"
});
PHP code (add to functions.php):
function sum($a=0, $b=0) {
$response['success'] = true;
$response['message'] = 'success';
$response['data'] = (int)$a + (int)$b;
header('Content-type: application/json');
echo json_encode($response, JSON_PRETTY_PRINT);
exit;
}
Javascript code:
wp.run('sum', [12, 34]).then(data=>{
console.log(data); // outputs "46"
});
Store data:
wp.run('set_transient', ['me', 'Raul']).then(data=>{
console.log(data); // stores a variable "me"
});
Retrieve data:
wp.run('get_transient', ['me']).then(data=>{
console.log(data); // outputs "Raul"
});
/**
* Simple Server-side Storage application
*/
var storage = {
/**
* Keep all your data within a namespace
*/
namespace: 'com.appcropolis',
wp: new WP(),
/**
* Retrieve data based on a key
*/
get: function(key) {
return new Promise((resolve, reject)=>{
this.wp.run('get_transient', [this.namespace +'.'+ key]).then(data=>{
try {
data = JSON.parse ( eval("'" + data + "'") );
} catch(e) {}
resolve(data);
});
});
},
/**
* Set key value pair
*/
set: function(key, value) {
value = typeof value == 'object'? JSON.stringify(value) : value;
return new Promise((resolve, reject)=>{
this.wp.run('set_transient', [this.namespace +'.'+ key, value]).then(data=>{
resolve(data);
});
});
},
/**
* remove key from transient
*/
unset: function(key) {
return new Promise((resolve, reject)=>{
this.wp.run('delete_transient', [this.namespace +'.'+ key]).then(data=>{
resolve(data);
});
});
}
};
// Testing the app
storage.set('colors', ['red', 'green', 'blue']).then(data => {
console.log(data); // if success, data = true, otherwise is false.
storage.get('colors').then(data => {
console.log(data); // outputs ['red', 'green', 'blue']
});
});