将外部jQuery文件中的变量数据传递给options.php

时间:2015-10-05 作者:Kev

我正在设置一个插件,该插件需要将一个变量从独立的jQuery文件传递到选项。php。我已经(我认为)设置了要在插件文件中使用的脚本,如下所示:

function ndw_js_init(){
    wp_enqueue_script(\'jquery\');
    wp_register_script( \'ndw_js\', plugin_dir_url( __FILE__ ) . \'/ndw_js.js\', array( \'jquery\' ), \'\', true );
    wp_enqueue_script( \'ndw_js\', plugin_dir_url( __FILE__ ) . \'/ndw_js.js\', array(), \'1.0.0\', true);
    $scriptdata = array(\'admin_ajax\' => admin_url( \'admin-ajax.php\' ));
    wp_localize_script( \'ndw_js\', \'toremove\', $scriptdata);
}
add_action(\'admin_init\', \'ndw_js_init\');
我要解决的问题是jQuery文件。该变量在单击时传递。到目前为止,我有一个工作正常的(使用alert()进行测试):

$(\'tr td .widget-remove a\').click(function(){
     var toremove = $(this).attr(\'rel\');
     var url = \'options.php\'; // EDIT: Actualy, is this right? Or should the data be passed to the name of my plugin main page I wonder
     // Out of ideas
});
因此,我需要的是帮助使用正确的AJAX语法将var“toremove”的值传递给“options”。php“然后在”选项中执行某些操作。php”,使用“toremove”的值。

希望这有意义!

EDIT No.1:

好的,在使用你们提供的不同设置后,我有一个(半)功能脚本:

function ndw_js_init(){
    wp_register_script( \'ndw_js\', plugin_dir_url( __FILE__ ) . \'/ndw_js.js\', array( \'jquery\' ), \'\', true );
    wp_enqueue_script( \'ndw_js\' ); // not working without this
    wp_localize_script( \'ndw_js\', \'toremove\', array(\'ajaxurl\' => admin_url( \'admin-ajax.php\' )));
}
add_action(\'admin_init\', \'ndw_js_init\');
没有这些设置nothing 作品在我的外部js文件中,我现在有:

$(\'tr td .widget-remove a\').click(function(){
        var toremove = $(this).attr(\'rel\');
        $.ajax({
            type: \'POST\', 
            dataType: \'json\',
            url: ajaxurl, 
            data: {
                nonce : toremove.nonce,
                toremove : toremove
            },
            complete: function( data ){
                alert(toremove + " ding!");
            }
        });
    });
这是可行的,但只适用于jQuery代码。在“我的插件设置”页面的“管理”区域中,使用正确的id号和单词“ding!”,单击会触发警报。

回到我的插件设置页面,我添加了以下内容(感谢@MMK):

function ndw_ajax_function(){            
    $toremove = $_POST[\'toremove\'];
    echo "To remove: " . $toremove;
}

add_action(\'wp_ajax_my_ajax_action\', \'ndw_ajax_function\' );
确实如此not 工作时,我查看生成的源,但不显示回显行。然而,我不确定在最后的添加操作中wp_ajax_my_ajax_action 指。

2 个回复
最合适的回答,由SO网友:Kev 整理而成

好吧,我是这样工作的:

Step One: Main Plugin File

function ndw_js_init(){
    wp_register_script( \'ndw_js\', plugin_dir_url( __FILE__ ) . \'/ndw_js.js\', array( \'jquery\' ), \'\', true );
    wp_enqueue_script( \'ndw_js\' );
    wp_localize_script( \'ndw_js\', \'removeid\', array(\'ajaxurl\' => admin_url( \'admin-ajax.php\' )));
}
add_action(\'admin_init\', \'ndw_js_init\');

Step Two: External JS File

$(\'tr td .widget-remove a\').click(function(){
    var toremove = $(this).attr(\'rel\');
    $.ajax({
        url: removeid.ajaxurl,
        data:{
            \'action\' : \'ndw_ajax_function\',
            \'passiton\' : toremove
        },
        success: function( data ){
            $(\'.widget-remove\').html(data);
        }
    });
});

Step Three: Back in Main Plugin File

function ndw_ajax_function(){
    $toremove = $_REQUEST[\'passiton\'];
    echo $toremove;
    die();
}
add_action(\'wp_ajax_ndw_ajax_function\', \'ndw_ajax_function\' );
add_action( \'wp_ajax_nopriv_ndw_ajax_function\', \'ndw_ajax_function\' );
这很好用。谢谢你的帮助,非常感谢。

SO网友:MMK

我可以建议:

$(\'tr td .widget-remove a\').click(function(){
    var toremove = $(this).attr(\'rel\');
    // Out of ideas     -     you shouldn\'t really be for we are here!
    $.ajax({
        type: \'POST\',         // use the method you want
        dataType: \'json\',
        url: ajaxurl,        // this is the url to the admin ajax script
        data: {
            nonce : your_script_data_object.nonce,
            toremove: toremove
        },
        complete: function( object ){
            // do what you want here when the ajax requests completes
        }
    });
});
现在,在插件的某个地方,你必须有一个函数来拦截你正在发送的数据。您应该确保您正在将ajax拦截函数添加到wordpress中的正确操作挂钩中。以下是您可以做到的方法。

以下是非oop方式。

add_action(\'wp_ajax_my_ajax_action\', \'my_ajax_function\' );
这里是oop方式。

add_action(\'wp_ajax_my_ajax_action\', array( $this, \'my_ajax_function\' ) );
功能如下:

function my_ajax_function(){            
    // do what you want here - the world is open to you
    $toremove = $_POST[\'toremove\'];
    // Any other thing you want to do
    wp_send_json_success( array( \'AnyDataYouWantToSend\' => $your_data ) );
}
如果您在my_ajax_function 然后使用wp_send_json_error 代替wp_send_json_success.

我还注意到一件不同寻常的事情。为什么要使用wp_register_scriptwp_enqueue_script 在同一脚本上。这里有一些你可以做的事情。删除wp_register_script 行并使函数如下所示:

function ndw_js_init(){
    wp_register_script( \'ndw_js\', plugin_dir_url( __FILE__ ) . \'/ndw_js.js\', array( \'jquery\' ), \'\', true );
    wp_enqueue_script( \'ndw_js\' );
    wp_localize_script( \'ndw_js\', \'toremove\' );
}
add_action(\'admin_init\', \'ndw_js_init\');
你不需要$scriptdata 正如我告诉你的,你使用的变量ajaxurl javascript变量已经允许您访问管理ajax url。这是只有当你是在管理。在前端,确保$scriptdata var作为的参数存在wp_localize_script

您也不需要这一行:

wp_enqueue_script(\'jquery\');
这是因为您已经告诉Wordpress您的脚本需要jquery 在dependencies数组参数中array( \'jquery\' ).

希望这有帮助。

相关推荐

JqueryUi对话框给出未捕获的TypeError:This._addClass不是函数错误

我有一个网站,我们需要一些自定义php编码来连接到外部数据库,以获取几个销售我们产品的供应商的产品评论URL。我们试图实现的基本想法是让用户注册他们的产品,然后如果他们愿意留下评论,就延长保修期。我正在使用XYZScript。com的“插入PHP”插件来实现这一点。该主题最初只加载了jQuery,以避免创建子主题,我们正在php脚本中加载jQueryUI。因此,我们将jQuery加载到文档的标题中,将jQueryUI加载到文档的正文中。我不太确定这是因为加载脚本的顺序造成的,还是其他一些冲突的javasc