Enqueue脚本

Question

我想用Ajax动态地为脚本排队。在页面中有一个按钮，单击这个按钮调用脚本按钮-script.js。

这是代码：

// Enqueue Ajax call
add_action('init', 'enqueue_ajax_call');
function enqueue_ajax_call() {
    wp_register_script('enqueue-ajax-call', 'path/to/file/ajax-call.js', array('jquery'));
    wp_localize_script('enqueue-ajax.call', 'ajax_call', array('ajaxurl' => admin_url('admin-ajax.php')));        
    wp_enqueue_script('enqueue-ajax-call');
}

// Enqueue script
add_action('wp_ajax_nopriv_buttonscript', 'enqueue_button_script');
add_action('wp_ajax_buttonscript', 'enqueue_button_script');
function enqueue_button_script(){
   add_action('wp_enqueue_scripts', function(){
       wp_register_script('button-js', 'path/to/file/button-script.js', array('jquery'), '1.0.0', true);
       wp_enqueue_script('button-js');
    });
}

// Ajax call
(function ($) {
"use strict";
    $(document).on('click', '.button', function() {
        $.ajax({
            url : ajax_call.ajax_url,
            data : {
                action : 'buttonscript',
            },
        });
    })
})(jQuery);

代码中有错误，还是不可能以这种方式对脚本进行排队？我知道添加内联脚本或直接在init上对脚本排队比较容易，但是在单击按钮后有必要专门对js文件进行排队。谢谢。

Answer 1

对于AJAX所做的事情有一个根本的误解。

您不能直接从从javascript调用的PHP中对脚本进行排队。您需要打印一些可供进行AJAX调用的javascript使用的内容。

然后可以使用javascript将该文件添加到DOM中。

functions.php

//* Enqueue Ajax call on wp_enqueue_scripts hook
add_action( 'wp_enqueue_scripts', 'enqueue_ajax_call' );
function enqueue_ajax_call() {
    wp_register_script( 'enqueue-ajax-call', PATH_TO . 'ajax-call.js', [ 'jquery' ] );
    wp_localize_script( 'enqueue-ajax.call', 'ajax_call', [ 'ajaxurl' => admin_url(' admin-ajax.php' ) ] );        
    wp_enqueue_script( 'enqueue-ajax-call' );
}

//* Print the button script on the AJAX request.
add_action('wp_ajax_nopriv_buttonscript', 'enqueue_button_script');
add_action('wp_ajax_buttonscript', 'enqueue_button_script');
function enqueue_button_script(){
   echo PATH_TO . 'button-script.js';
   wp_die();
}

ajax-call.js

//* Ajax call
(function ($) {
"use strict";
  $( document ).on( 'click', '.button', function() {
    $.ajax({
      url : ajax_call.ajax_url,
        data : {
          action : 'buttonscript',
        },
      },
      function(filename){
        // Do something useful with the filename
        var script = document.createElement( 'script' );
        script.setAttribute( "src", filename );
        document.getElementsByTagName( "head" )[0].appendChild( script );
      });
  });
})(jQuery);