在Wordpress中把jQuery Ajax传给PHP后,如何在其他函数中使用前更新全局变量(不使用async=false)?

0 人关注

第一次在StackOverflow上发帖。 (感谢上引,以帮助我被纳入社区)

尽管我是个编码新手,但由于Zac Gordon非常有帮助的视频 https://youtu.be/Z0Jw226QKAM?t=216 和演示文件 https://github.com/zgordon/wordpress-ajax ,我已经能够在Wordpress中按照他概述的步骤解决以下步骤。

  • 通过 wp_localize_script 传递 Nonce 和 AJAX URL
  • 在JavaScript中用Nonce和URL进行AJAX调用
  • 将PHP的AJAX功能挂到Wordpress的AJAX钩子上
  • 使用JavaScript来处理AJAX响应
  • 虽然我能够用AJAX响应返回预期的结果(我可以打印到控制台),而且我现在能够检索一个值来传递给另一个函数,但我无法在传递给其他函数之前更新这个值。

    根据StackOverflow的其他对话 (JQuery - 将ajax响应存储到全局变量 ),我认为这可能是异步与同步AJAX调用的问题。 然而,我进一步了解到,应该不惜一切代价避免设置 "async: false" ,而且在这一点上似乎已经过时了(当我尝试时也没有帮助),所以我试图找到正确的方法,将这个变量从一个函数传递到另一个函数。 我读到的答案并不是针对Wordpress的,这让我对自己的解决方法感到茫然。

    目标是相当直接的:使用AJAX获取 $(window).height() ,存储为一个变量,将变量传递到PHP的另一个函数中,该函数对变量进行转换并调整地图插件的高度(挂钩: storymap_heights )。

    对于初学者来说。我目前只是想让它在初始页面加载时发挥作用,但我也想知道是否有可能在每次浏览器窗口调整大小时重新运行这些函数?

    下面的代码让我接近了。我必须刷新两次,全局变量$heights {和/或 "get_option( 'jsforwp_heights') "}来更新并正确设置 "新 "的浏览器窗口大小(所以它似乎在存储这个变量,但要等到它至少运行了一次之后才存储)。 该代码目前存储在Wordpress Snippets插件中,但应该与放在Functions.php中的工作相同。

    global $heights ; if ( null == $heights ) { add_option( 'jsforwp_heights' , 100 ); $heights = get_option( 'jsforwp_heights' ); function my_theme_scripts ( ) { wp_enqueue_script( 'my-great-script' , get_template_directory_uri() . '/assets/js/my-great-script.js' , array ( 'jquery' ), '1.12.4' , true ); wp_localize_script( 'my-great-script' , 'jsforwp_globals' , 'ajax_url' => admin_url( 'admin-ajax.php' ), 'total_heights' => get_option( 'jsforwp_heights' ), 'nonce' => wp_create_nonce( 'nonce_name' ) add_action( 'wp_enqueue_scripts' , 'my_theme_scripts' ); function screen_height_is ( ) { check_ajax_referer( 'nonce_name' ); global $heights ; $heights = $_POST [ 'height' ]; update_option( 'jsforwp_heights' , $heights ); // set_map_height($heights); //test $response [ 'success' ] = true ; $response [ 'height' ] = $heights ; $response = json_encode( $response ); echo $response ; wp_die(); add_action( 'wp_ajax_screen_height_is' , 'screen_height_is' , 1 ); add_action( 'wp_ajax_nopriv_screen_height_is' , 'screen_height_is' , 1 ); function set_map_height ( ) { global $heights ; $testA = get_option( 'jsforwp_heights' ); $testB = "px" ; $height = $testA . $testB ; echo $height ; return $height ; add_filter( 'storymaps_heights' , 'set_map_height' , 10 ); //tests for function above //function set_map_height($heights){ //$testA = '300'; //static option //$testA = $heights; //works with same loading delay problem //$testA = $response['height']; //doesn't work even if $response set as global

    我试过嵌套函数,但没有成功,在screen_height_is()函数中调用set_map_height($heights)也没有成功。 我还尝试在add_action和add_filter中设置#Priority(add_action为1,add_filter为10),试图让它们等待运行,但这似乎也不正确。

    以下代码存储在我的js文件中:my-great-script.js。

    jQuery(document).ready(function($){
        var myResponse;
        $.ajax({
            type: 'post',
            dataType: 'json',
            url: jsforwp_globals.ajax_url,
            async: false,
            data: {
                action       : 'screen_height_is',
                _ajax_nonce  : jsforwp_globals.nonce,
                width        : $(window).width(),
                height       : $(window).height(),
                screen_width : screen.width,
                screen_height: screen.height
            success: function( response ) {
     //      if( 'success' == response) {
             if( response['success'] == true) {
                alert("Something went right");
             else {
                alert("Something went wrong");
        .done(function(response) {
            console.log(response);
        .fail(function(error) {
            alert(error);
        .always(function() {
            console.log("complete");
    

    控制台日志打印。

    {height: "598", success: true}。

    我有点不清楚,我是否应该/如何修改Success回调以达到我的总体目标?或者是否需要修改wp_enqueue_script()依赖关系

    如果这有帮助的话,下面这个过滤器在PHP中钩住了storymaps-core.php文件。

    add_filter('storymaps_heights','set_map_height',10);
    

    以下是wp_enqueue_script的位置。

    function storymap_external_resources() {
        wp_enqueue_style( 'storymap-stylesheet', 'https://cdn.knightlab.com/libs/storymapjs/latest/css/storymap.css' );