php 如何在 WordPress 简码中使用 AJAX？

Question

提问by Доктор Скальпинг

I have a code to display a random quote. One person wrote a function to implement all of this. But the update data via AJAX for some reason does not work. When you press the button "New Quote", nothing happens. Maybe someone knows why? What needs to be fixed in the following code, so that when you click "New quote" a new quote is loaded?

我有一个代码来显示随机报价。一个人编写了一个函数来实现所有这些。但是由于某种原因通过 AJAX 更新数据不起作用。当您按下“新报价”按钮时，没有任何反应。也许有人知道为什么？以下代码需要修正什么，以便当您单击“新报价”时会加载新报价？

The PHP

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>';
 ?>

The HTML Structure

HTML 结构

In a page content, a widget or a template file:

在页面内容、小部件或模板文件中：

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

This you can obviously adjust to your liking, but for the sake of this example, this is what we're going with.
We will generate the above via a shortcode later.

这显然可以根据自己的喜好进行调整，但就本示例而言，这就是我们要做的。
稍后我们将通过短代码生成上述内容。

The jQuery

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

函数.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' );

How you can update the content on the page using AJAX in WordPress?

如何在 WordPress 中使用 AJAX 更新页面上的内容？

Answer 1

回答by brasofilo

Nice question!

好问题！

But, as your code starts with a bad practice - require_once('wp-load.php');-, I decided to pick one of my working snippets and adapt it.

但是，由于您的代码从一个不好的做法开始 - require_once('wp-load.php');-，我决定选择我的一个工作片段并对其进行调整。

Observations:

观察：

Differently from your code, no external quotes.txtis being grabbed, here a Post Type is used as source (post), in the method get_random_post
There can only be one instanceof the shortcode in a given page, as it is based on specific element ID's (#newpost-shortcodeand #randomposts)
As usual, it's better to create a pluginfor this. Follow the code comments.

与您的代码不同，没有获取外部代码，quotes.txt这里使用 Post Type 作为源（post），在方法中get_random_post
给定页面中只能有一个短代码实例，因为它基于特定的元素 ID（#newpost-shortcode和#randomposts）
像往常一样，最好为此创建一个插件。遵循代码注释。

/wp-content/plugins/so-ajax-shortcode/so-ajax-shortcode.php

<?php
/**
 * Plugin Name: (SO) Ajax Shortcode
 * Description: Demonstration of WordPress Ajax working as a shortcode.
 * Plugin URI:  http://stackoverflow.com/a/13614297/1287812
 * Version:     2013.10.25
 * Author:      Rodolfo Buaiz
 * Author URI:  https://wordpress.stackexchange.com/users/12615/brasofilo
 * License:     GPLv3
 */

add_action(
    'plugins_loaded',
    array ( B5F_SO_13498959::get_instance(), 'plugin_setup' )
);

class B5F_SO_13498959
{
    private $cpt = 'post'; # Adjust the CPT
    protected static $instance = NULL;
    public $plugin_url = '';
    public function __construct() {}

    public static function get_instance()
    {
        NULL === self::$instance and self::$instance = new self;
        return self::$instance;
    }

    /**
     * Regular plugin work
     */
    public function plugin_setup()
    {
        $this->plugin_url = plugins_url( '/', __FILE__ );
        add_shortcode( 'randomposts', array( $this, 'shortcode') );
        add_action( 'wp_enqueue_scripts', array( $this, 'enqueue' ) );
        add_action( 'wp_ajax_query_rand_post', array( $this, 'query_rand_post' ) );
        add_action( 'wp_ajax_nopriv_query_rand_post', array( $this, 'query_rand_post' ) );
    }

    /**
     * SHORTCODE output
     */
    public function shortcode( $atts ) 
    {
        # First post
        if( ! $random_post = $this->get_random_post() )
            $random_post = __( 'Could not retrieve a post.' );
        # Prepare output
        $output = sprintf(
            '<div id="randomposts">%s</div>
             <button id="newpost-shortcode" type="button" title="%s">%s</button>',
            $random_post,
            __( 'Gimme a new one!' ),
            __( 'New random post' )
        );
        return $output;
    }

    /**
     * ACTION Enqueue scripts
     */
    public function enqueue() 
    {
        # jQuery will be loaded as a dependency
        ## DO NOT use other version than the one bundled with WP
        ### Things will BREAK if you do so
        wp_enqueue_script( 
             'ajax-random-post',
             "{$this->plugin_url}ajax.js",
             array( 'jquery' )
        );
        # Here we send PHP values to JS
        wp_localize_script( 
             'ajax-random-post',
             'wp_ajax',
             array( 
                 'ajaxurl'      => admin_url( 'admin-ajax.php' ),
                 'ajaxnonce'   => wp_create_nonce( 'ajax_post_validation' ),
                 'loading'    => 'http://i.stack.imgur.com/drgpu.gif'
            ) 
        );
    }

    /**
     * AJAX query random post
     * 
     * Check for security and send proper responses back
     */
    public function query_rand_post()
    {
        check_ajax_referer( 'ajax_post_validation', 'security' );
        $random_post = $this->get_random_post();
        if( !isset( $random_post ) )
            wp_send_json_error( array( 'error' => __( 'Could not retrieve a post.' ) ) );
        else
            wp_send_json_success( $random_post );
    }

    /**
     * AUX FUNCTION 
     * Search a random Post Type and return the post_content
     */
    public function get_random_post()
    {
        $array = get_posts( 
            array( 
                  'post_type' => $this->cpt,
                  'numberposts' => -1 
            ) 
        );
        if( empty( $array ) )
            return false;

        # Select a random post index number from the current array
        $r = rand( 0, count($array) - 1 );
        return $array[$r]->post_content;
    }
}

/wp-content/plugins/so-ajax-shortcode/ajax.js

/* 
 * @plugin SO Ajax Shortcode
 */

jQuery( document ).ready( function( $ ) 
{ 
     var data = {
         action: 'query_rand_post',
         security: wp_ajax.ajaxnonce
     };
     var image = '<img src="' + wp_ajax.loading + '" alt="Loading ..." width="16" height="16" />';

    $( '#newpost-shortcode' ).click( function(e) 
    {
        e.preventDefault();
        $( '#randomposts' ).html( image );
        $.post( 
            wp_ajax.ajaxurl, 
            data,                   
            function( response )
            {
                // ERROR HANDLING
                if( !response.success )
                {
                    // No data came back, maybe a security error
                    if( !response.data )
                        $( '#randomposts' ).html( 'AJAX ERROR: no response' );
                    else
                        $( '#randomposts' ).html( response.data.error );
                }
                else
                    $( '#randomposts' ).html( response.data );
            }
        ); 
    }); // end click
});

Answer 2

回答by Azzrael

Here sample plugin as answer to the question. Using ajaxurl at frontend.

这里示例插件作为问题的答案。在前端使用 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

报价加载器.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');
    });
});

Answer 3

回答by Arsalan Azhar

Wordpress shortcode same like function where you give parameters,

Wordpress 简码与您提供参数的功能相同，

for creating ajax request you can use jQuery.ajax or xmlhttp in your header or function file with add_action wp_headhook.

要创建 ajax 请求，您可以在带有add_action wp_head钩子的头文件或函数文件中使用 jQuery.ajax 或 xmlhttp 。

you should create ajax.php in your theme folder and on the top of file you should include wp-load.php. and place all your ajax functions in proper manner.

您应该在主题文件夹中创建 ajax.php，并在文件顶部包含 wp-load.php。并以正确的方式放置所有 ajax 函数。

Answer 4

回答by Dedering

The selector used in the trigger doesn't match the button ID.

触发器中使用的选择器与按钮 ID 不匹配。

Change jQuery('#newquotes')to jQuery('#newquote')

更改jQuery('#newquotes')为jQuery('#newquote')

Answer 5

回答by Heena Patel

Add this function in function.php:

在function.php中添加这个函数：

    <?php
    add_action('wp_head','ajaxurl');
    function ajaxurl()
    {
    ?>
        <script type="text/javascript">
        var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
        </script>
    <?php
    }?>

php 如何在 WordPress 简码中使用 AJAX？

提问by Доктор Скальпинг

The PHP

PHP

The HTML Structure

HTML 结构

The jQuery

jQuery

functions.php

函数.php

回答by brasofilo

/wp-content/plugins/so-ajax-shortcode/so-ajax-shortcode.php

/wp-content/plugins/so-ajax-shortcode/so-ajax-shortcode.php

/wp-content/plugins/so-ajax-shortcode/ajax.js

/wp-content/plugins/so-ajax-shortcode/ajax.js

回答by Azzrael

回答by Arsalan Azhar

回答by Dedering

回答by Heena Patel

相关推荐

最近更新

标签

php 如何在 WordPress 简码中使用 AJAX？

提问by Доктор Скальпинг

The PHP

PHP

The HTML Structure

HTML 结构

The jQuery

jQuery

functions.php

函数.php

回答by brasofilo

/wp-content/plugins/so-ajax-shortcode/so-ajax-shortcode.php

/wp-content/plugins/so-ajax-shortcode/so-ajax-shortcode.php

/wp-content/plugins/so-ajax-shortcode/ajax.js

/wp-content/plugins/so-ajax-shortcode/ajax.js

回答by Azzrael

回答by Arsalan Azhar

回答by Dedering

回答by Heena Patel

相关推荐

PHP 配置：依赖系统的时区设置是不安全的

php PHP构造函数返回一个NULL

php 如何成为 OpenCart 大师？

在 MySQL 中插入日期时间时的 PHP date() 格式

相关推荐

最近更新

标签