如何在 WordPress 短代码中集成 AJAX 功能？

如何在 WordPress 短代码中使用 AJAX？

使用短代码实现 AJAX

PHP:

短代码的 PHP 代码应包含以下：

function random_quote( $atts ) {
    // Extract shortcode attributes
    extract( shortcode_atts( array(
        'path' => get_template_directory_uri() . '/quotes.txt' // Default path
    ), $atts ) );

    // Retrieve quotes from file
    $array = file( $path );
    $r = rand( 0, count($array) - 1 );

    // Render shortcode output
    $output = '<div>

jQuery：

处理按钮单击并执行 AJAX 请求：

jQuery('#newquote').click( function() {
    // Send AJAX request to retrieve a new quote
    $.ajax({
        type: 'POST',
        url: ajaxParams.themeURI+'js/ajax-load-quote.php',
        data: { file_path: ajaxParams.filePath },
        beforeSend: function() {
            ajaxLoadingScreen(true,'#randomquotes');
        },
        success: function(data) {
            // Replace old quote with new one
            jQuery('#randomquotes').find('p').remove();
            jQuery('#randomquotes').prepend(data);
        },
        complete: function() {
            ajaxLoadingScreen(false,'#randomquotes');
        }
    });
    return false;
});

如何在 WordPress 中使用 AJAX短代码

1. 创建 PHP文件： 在 JS 和 PHP 之间建立通信点（例如 ajax-load-quote.php）。
2. 配置短代码： 编写短代码以生成必要的 HTML 和 JS /AJAX 集成。
3. 加载必要的脚本： 入队Functions.php 中所需的 JS 文件（例如 wp_enqueue_script）。
4. JavaScript 中的 AJAX 调用： 使用 jQuery、XHR 或类似工具从 JS 发送 AJAX 请求。
5. 在 PHP 中处理 AJAX 请求：处理数据，执行必要的操作，然后返回修改后的内容。
6. 更新 JS 中的视图：根据服务器端 AJAX 请求的响应更新 HTML。

以上是如何在 WordPress 短代码中集成 AJAX 功能？的详细内容。更多信息请关注PHP中文网其他相关文章！