我有一个代码来显示一个随机引用。一个人写了一个函数来实现所有这些。但是由于某些原因,通过AJAX更新数据不起作用。当您按下"New Quote“按钮时,没有任何反应。也许有人知道为什么?在以下代码中需要修复哪些内容,以便在单击"New quote“时加载新的报价?
PHP
/wp-content/themes/%your_theme%/js/ajax-load-quote.php
<?php
/* uncomment the below, if you want to use native WP functions in this file */
// require_once('../../../../wp-load.php');
$array = file( $_POST['file_path'] ); // file path in $_POST, as from the js
$r = rand( 0, count($array) - 1 );
return '<p>' . $array[$r] . '</p>';
?>
HTML结构
在页面内容、小工具或模板文件中:
<div id="randomquotes">
<p>I would rather have my ignorance than another man’s knowledge,
because I have so much more of it.<br />
-- Mark Twain, American author & Playwright</p>
</div>
<a id="newquote" class="button" href="#" title="Gimme a new one!">New Quote</a>
这显然可以根据你的喜好进行调整,但是为了这个例子,这就是我们要做的。
我们将在稍后通过一个短代码生成上述代码。
The jQuery
/wp-content/themes/%your_theme%/js/ajax-load-quote.js
function ajaxQuote() {
var theQuote = jQuery.ajax({
type: 'POST',
url: ajaxParams.themeURI+'js/ajax-load-quote.php',
/* supplying the file path to the ajax loaded php as a $_POST variable */
data: { file_path: ajaxParams.filePath },
beforeSend: function() {
ajaxLoadingScreen(true,'#randomquotes');
},
success: function(data) {
jQuery('#randomquotes').find('p').remove();
jQuery('#randomquotes').prepend(data);
},
complete: function() {
ajaxLoadingScreen(false,'#randomquotes');
}
});
return theQuote;
}
/* Loading screen to be displayed during the process, optional */
function ajaxLoadingScreen(switchOn,element) {
/* show loading screen */
if (switchOn) {
jQuery(''+element).css({
'position': 'relative'
});
var appendHTML = '<div class="ajax-loading-screen appended">
<img src="'+ajaxParams.themeURI+'images/ajax-loader.gif"
alt="Loading ..." width="16" height="16" /></div>';
if( jQuery(''+element).children('.ajax-loading-screen').length === 0 ) {
jQuery(''+element).append(appendHTML);
}
jQuery(''+element).children('.ajax-loading-screen').first().css({
'display': 'block',
'visibility': 'visible',
'filter': 'alpha(opacity=100)',
'-ms-filter': '"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"',
'opacity': '1'
});
} else {
/* hide the loading screen */
jQuery(''+element).children('.ajax-loading-screen').css({
'display': '',
'visibility': '',
'filter': '',
'-ms-filter': '',
'opacity': ''
});
jQuery(''+element).css({
'position': ''
});
}
}
/* triggering the above via the click event */
jQuery('#newquotes').click( function() {
var theQuote = ajaxQuote();
return false;
});
functions.php
/wp-content/themes/%your_theme%/functions.php
function random_quote( $atts ) {
/* extracts the value of shortcode argument path */
extract( shortcode_atts( array(
'path' => get_template_directory_uri() . '/quotes.txt' // default, if not set
), $atts ) );
$array = file( $path );
$r = rand( 0, count($array) - 1 );
$output = '<div id="randomquotes">' .
'<p>' . $array[$r] . '</p>' .
'</div>' .
'<a id="newquote" class="button" href="#" title="Gimme a new one!">New Quote</a>';
/* enqueue the below registered script, if needed */
wp_enqueue_script( 'ajax-quote' );
/* supplying the file path to the script */
wp_localize_script(
'ajax-quote',
'ajaxParams',
array(
'filePath' => $path,
'themeURI' => get_template_directory_uri() . '/'
)
);
return $output;
}
add_shortcode( 'randomquotes', 'random_quote');
/* register the js */
function wpse72974_load_scripts() {
if ( ! is_admin() ) {
wp_register_script(
'ajax-quote',
get_template_directory_uri() . '/js/ajax-load-quote.js',
array( 'jquery' ),
'1.0',
true
);
}
}
add_action ( 'init', 'wpse72974_load_scripts' );
如何在WordPress中使用AJAX更新页面上的内容?
发布于 2016-12-26 03:26:03
下面是作为问题答案的示例插件。在前端使用ajaxurl。
so-random-quotes.php
<?php
/*
Plugin Name: SO Random Quotes
Plugin URI: http://azzrael.ru
Description: Reference to http://stackoverflow.com/questions/13498959/how-to-use-ajax-in-a-wordpress-shortcode
Version: 1.0.0
Author: Azzrael
Author URI: http://azzrael.ru
*/
new SoRandomQuotes();
/**
* Class SoRandomQuotes
*/
class SoRandomQuotes{
const SHORTCODE_KEY = 'randomquotes'; // usage [randomquotes path='/path/to/file/another.quotes.csv']
const AJAX_ACTION = 'so_getnewquote'; // ajax action
const DOM_TARGET = 'randomquotes'; // dom element to put the quotes
/**
* SoRandomQuotes constructor.
* init actions
*/
function __construct() {
// adding shortcode
add_shortcode('randomquotes', array($this, 'addShortcode'));
// adding ajax callbacks
add_action( 'wp_ajax_'.self::AJAX_ACTION, array($this, 'getQuoteAjax')); // admin
add_action( 'wp_ajax_nopriv_'.self::AJAX_ACTION, array($this, 'getQuoteAjax')); // front
}
/**
* Shortcode callback
* @param $atts
* @return string
*/
public function addShortcode($atts){
// getting path value from shortcode atts
$got =shortcode_atts( array(
'path' => plugin_dir_path( __FILE__ ).'quotes.txt',
), $atts );
// shortcode replacement
$out = sprintf(
'<div id="%s">%s</div><a id="newquote" class="button" href="#" title="Gimme a new one!">New Quote</a>',
self::DOM_TARGET,
$this->getQuote($got['path'])
);
// loading js
// jquery depends
wp_enqueue_script('sorandquo-js', plugin_dir_url( __FILE__ ).'quote-loader.js', array('jquery'));
// passing to js needed vars
wp_localize_script( 'sorandquo-js', 'ajaxParams',
array(
'path' => $got['path'], // path to qoutes file
'targetDom' => '#'.self::DOM_TARGET, // dom path to put resulting qoute
'ajaxurl' => admin_url( 'admin-ajax.php'), // for frontend ( not admin )
'action' => self::AJAX_ACTION, //
)
);
// render shortcode replacement
return $out;
}
/**
* Ajax Callback
*/
public function getQuoteAjax(){
echo $this->getQuote($_POST['path']);
die();
}
/**
* Getting random Qoute from the file
* @param $path
* @return mixed
*/
public function getQuote($path){
$quotesFile = is_file($path) ? file_get_contents($path):"File {$path} not found";
$quotesArr = $quotesFile ? explode("\n", $quotesFile):['Quotes File is empty'];
return $quotesArr[array_rand($quotesArr)];
}
}
quote-loader.js
jQuery.noConflict();
jQuery(document).ready(function($) {
$(document).on('click', '#newquote', function (e) {
e.preventDefault();
$.post(ajaxParams.ajaxurl, {
'action':ajaxParams.action,
'path' :ajaxParams.path
}, function (ret) {
$(ajaxParams.targetDom).html(ret);
}, 'html');
});
});
发布于 2013-11-13 15:40:08
Wordpress快捷码和函数一样,你可以给出参数,
要创建ajax请求,可以在带有add_action wp_head
钩子的头文件或函数文件中使用jQuery.ajax或xmlhttp。
您应该在主题文件夹中创建ajax.php,并且在文件的顶部应该包含wp-load.php。并以适当的方式放置所有ajax函数。
发布于 2017-09-28 23:03:16
触发器中使用的选择器与按钮ID不匹配。
将jQuery('#newquotes')
更改为jQuery('#newquote')
https://stackoverflow.com/questions/13498959
复制相似问题