WordPress AJAX响应混入JS代码求助：如何返回纯JSON结果

问题概述 #

• 使用PHP开发WordPress插件
• 插件包含AJAX请求逻辑
• AJAX请求应返回纯JSON对象，但实际响应中混入了前端JavaScript代码

相关代码文件 #

ajax.php 原代码 #

<?php
function test_ajax()
{
    $data = [
        'success' => true,
        'message' => ' has been load successfully.',
    ];
    wp_send_json_success($data);
}
add_action('wp_ajax_test_ajax', 'test_ajax');
add_action('wp_ajax_nopriv_test_ajax', 'test_ajax');
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        var indexingMessage = $("#indexing-message");
        $("#index-urls").click(function (event) {
            event.preventDefault(); // Prevent default form submission
            console.log("Loading...");
            indexingMessage.text("Loading...");
            var urls = $("#urls").val().trim().split(/\r?\n/); // Split URLs by newlines
            if (!urls.length) {
                indexingMessage.text("Please enter URLs.");
                return;
            }
            function indexUrl(url) {
                $.ajax({
                    url: "<?php echo admin_url('admin-ajax.php'); ?>",
                    type: "POST",
                    data: {
                        action: "test_ajax",
                        url: url,
                    },
                    dataType: 'json',
                    success: (response_ajax) => {
                        console.log("Response AJAX:", response_ajax);
                        if (response_ajax.success) {
                            indexingMessage.text("Success:: " + url);
                        } else {
                            indexingMessage.text("Error! An error occurred. Please try again later. Please check your browser's log for details");
                        }
                    },
                    error: (xhr, status, error) => {
                        console.log("Error AJAX:", JSON.stringify(error));
                        indexingMessage.text("Error! An error occurred. Please try again later. Please check your browser's log for details.");
                    }
                });

            }
            for (let i = 0; i < urls.length; i++) {
                indexUrl(urls[i]);
            }
        });
    });
</script>

load-urls.php 原代码 #

<?php
/*
Plugin Name: Load URLs
Plugin URI: 
Description: Custom author template for WordPress.
Version: 1.0
Author URI:
License: GPL2
*/
include_once ('ajax.php');
add_action('admin_menu', 'my_plugin_settings_page');

function my_plugin_settings_page()
{
    add_menu_page(
        'My Plugin Settings',
        'My Plugin',
        'manage_options',
        'my-plugin-settings',
        'my_plugin_settings_content',
        'dashicons-admin-settings' // Optional icon
    );
}

function my_plugin_settings_content()
{
    ?>
    <div class="wrap">
        <h1>My Plugin Settings</h1>
        <form method="post" action="options.php">
            <?php settings_fields('my-plugin-settings-group'); ?>
            <div id="my-plugin-settings-section">
                <h3>key</h3>
                <table class="form-table">
                    <tr valign="top">
                        <th scope="row"><label for="key"> Key</label></th>
                        <td>
                            <textarea style="height:200px;width:100%" type="text" name="key" id="key"
                                 size="60" ><?php echo esc_attr(get_option('key')); ?></textarea>
                            <p class="description">Enter your key here.</p>
                        </td>
                    </tr>
                </table>

            </div>
            <?php submit_button('Save Changes'); ?>
        </form>
        <h3> URLs</h3>
        <table>
            <tr valign="top">
                <th scope="row"><label for="urls">URLs  (separate URLs with newlines)</label></th>
                <td>
                    <textarea style="height:200px;width:100%" name="urls" id="urls" rows="5"
                        cols="50"></textarea>
                    <p class="description">Enter each URL on a separate line.</p>
                </td>
            </tr>
        </table>
        <p>Click the button below to load the URLs you entered above.</p>
        <button id="index-urls" class="button button-primary">Load URLs</button>
        <p id="indexing-message"></p>
    </div>
    <?php
}
add_action('admin_init', 'my_plugin_register_settings');

function my_plugin_register_settings()
{
    register_setting('my-plugin-settings-group', 'key', 'sanitize_text_field');
}
?>

当前AJAX返回结果 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>
    $(document).ready(function () {
        var indexingMessage = $("#indexing-message");
        $("#index-urls").click(function (event) {
            event.preventDefault(); // Prevent default form submission
            console.log("Loading...");
            indexingMessage.text("Loading...");
            var urls = $("#urls").val().trim().split(/\r?\n/); // Split URLs by newlines
            if (!urls.length) {
                indexingMessage.text("Please enter URLs.");
                return;
            }
            function indexUrl(url) {
                $.ajax({
                    url: "https://192.168.146.1/kiguiadsence/wp-admin/admin-ajax.php",
                    type: "POST",
                    data: {
                        action: "test_ajax",
                        url: url,
                    },
                    dataType: 'json',
                    success: (response_ajax) => {
                        console.log("Response AJAX:", response_ajax);
                        if (response_ajax.success) {
                            indexingMessage.text("Success:: " + url);
                        } else {
                            indexingMessage.text("Error! An error occurred. Please try again later. Please check your browser's log for details");
                        }
                    },
                    error: (xhr, status, error) => {
                        console.log("Error AJAX:", JSON.stringify(error));
                        indexingMessage.text("Error! An error occurred. Please try again later. Please check your browser's log for details.");
                    }
                });

            }
            for (let i = 0; i < urls.length; i++) {
                indexUrl(urls[i]);
            }
        });
    }); </script>{"success":true,"data":{"success":true,"message":" has been load successfully."}}

期望返回结果 #

{"success":true,"data":{"message":" has been load successfully."}}

问题原因 #

当AJAX请求触发test_ajax函数时，WordPress会加载插件主文件load-urls.php，而主文件通过include_once('ajax.php')引入了包含前端JS代码的文件。此时，ajax.php中的<script>标签内容会直接输出到AJAX响应中，尽管wp_send_json_success()会终止脚本执行，但之前的JS代码已经被发送到响应流，导致JSON结果被混入JS代码。

解决方案 #

1. 分离AJAX处理逻辑与前端JS代码 #

修改ajax.php，只保留PHP的AJAX处理函数，删除所有前端JS代码：

<?php
function test_ajax()
{
    $data = [
        'message' => ' has been load successfully.',
    ];
    wp_send_json_success($data);
}
add_action('wp_ajax_test_ajax', 'test_ajax');
add_action('wp_ajax_nopriv_test_ajax', 'test_ajax');
?>

2. 创建独立的前端JS文件 #

在插件目录下创建js/load-urls.js文件，放入原有的前端JS逻辑，并通过WordPress本地化脚本传递AJAX URL：

jQuery(document).ready(function ($) {
    var indexingMessage = $("#indexing-message");
    $("#index-urls").click(function (event) {
        event.preventDefault();
        console.log("Loading...");
        indexingMessage.text("Loading...");
        var urls = $("#urls").val().trim().split(/\r?\n/);
        if (!urls.length) {
            indexingMessage.text("Please enter URLs.");
            return;
        }
        function indexUrl(url) {
            $.ajax({
                url: loadUrlsAjax.ajax_url,
                type: "POST",
                data: {
                    action: "test_ajax",
                    url: url,
                },
                dataType: 'json',
                success: (response_ajax) => {
                    console.log("Response AJAX:", response_ajax);
                    if (response_ajax.success) {
                        indexingMessage.text("Success:: " + url);
                    } else {
                        indexingMessage.text("Error! An error occurred. Please try again later. Please check your browser's log for details");
                    }
                },
                error: (xhr, status, error) => {
                    console.log("Error AJAX:", JSON.stringify(error));
                    indexingMessage.text("Error! An error occurred. Please try again later. Please check your browser's log for details.");
                }
            });
        }
        for (let i = 0; i < urls.length; i++) {
            indexUrl(urls[i]);
        }
    });
});

3. 在主插件文件中加载前端脚本 #

修改load-urls.php，添加脚本加载逻辑，只在插件设置页面加载所需脚本：

<?php
/*
Plugin Name: Load URLs
Plugin URI: 
Description: Custom author template for WordPress.
Version: 1.0
Author URI:
License: GPL2
*/
include_once ('ajax.php');

// 加载前端脚本
function load_urls_enqueue_scripts() {
    $screen = get_current_screen();
    // 仅在插件设置页面加载脚本
    if ($screen->id === 'toplevel_page_my-plugin-settings') {
        wp_enqueue_script('load-urls-script', plugin_dir_url(__FILE__) . 'js/load-urls.js', array('jquery'), '1.0', true);
        // 传递AJAX URL到前端
        wp_localize_script('load-urls-script', 'loadUrlsAjax', array(
            'ajax_url' => admin_url('admin-ajax.php')
        ));
    }
}
add_action('admin_enqueue_scripts', 'load_urls_enqueue_scripts');

add_action('admin_menu', 'my_plugin_settings_page');

// 以下原有代码保持不变...
?>

额外优化 #

• WordPress后台已默认加载jQuery，无需手动引入，可删除原代码中的jQuery外部引用
• wp_send_json_success()会自动包裹数据为{"success":true,"data":...}结构，无需在$data中重复添加success键

内容的提问来源于stack exchange，提问作者Zappia Motors