我正在尝试开发我的第一个Wordpress插件,为此我想使用wp_localize_脚本发布表单数据,而不刷新页面。问题是我不太了解如何在wp_localize_脚本中设置$data参数。
更多解释:
>
1) 我有一个表格,上面有一个数据列表,每个数据列表都有一个复选框。
2)当我点击一个按钮来保存选中的数据时,我试着把它们发布在admin-ajax.php上,但是我不知道如何在我的函数中设置第三个参数wp_localize_script()。
在Wordpress Codex上的例子中,似乎第三个数据必须是已知的...但是在点击保存按钮的那一刻,我无法知道检查了哪些数据。
关于WordPress Codex:
<?php
wp_localize_script( $handle, $name, $data );
// Register the script
wp_register_script( 'some_handle', 'path/to/myscript.js' );
// Localize the script with new data
$translation_array = array(
'some_string' => __( 'Some string to translate', 'plugin-domain' ),
'a_value' => '10'
);
wp_localize_script( 'some_handle', 'object_name', $translation_array );
// Enqueued script with localized data.
wp_enqueue_script( 'some_handle' );
?>
在我的插件中,我想发布一个检查数据数组,通过传递json中发布的数据(stringify),但它还不起作用(可能是因为我还不明白wp_localize_script()如何在这种环境下工作)。
例如,我的脚本是这样的:
--Jquery部分:
// clic on the "save button"
$('#bppv_phcats_save').click(function(){
// I load a div to show a loader ( only for the design )
$('.bppv-loader').slideDown(150);
// I create an empty array
var ph_cats = [];
// I make a loop to check which checkbox is checked
$('.bppv_phcat').each(function(i, obj) {
// If current checkbox in loop is checked, I push it in the array with the data 1
if($(this).prop('checked') === true){
ph_cats[$(this).attr('name')] = 1;
// Else if the current checkbox is unchecked, I push it into the array too but with the data 0
}else{
ph_cats[$(this).attr('name')] = 0;
}
});
// I convert my array in json format and stringify this
ph_cats = JSON.stringify($.extend({},ph_cats));
// I test in the web console if the data looks like I want, it's ok
console.log(ph_cats);
// I instanciate the variables
var data = {
action : 'select_phcats',
nonce : bppv_phcats_obj.nonce, // I create a nonce for more security
ph_cats : bppv_phcats_obj.ph_cats // This is the data I want to retrieve in PHP
};
// I post the data to adamin-ajax.php
$.post(bppv_phcats_obj.ajax_url, data, function(response){
// I display an alert to check the response
alert('Response : '+response);
});
});
--PHP第1部分)注册。js脚本
// I register my .js script
wp_register_script('bppv_js',BPPV_ROOT_URL.'assets/js/bppv.js',array('jquery'),'1.0',true);
// I enqueue it
wp_enqueue_script('bppv_js');
// The famous wp_localize_script() function I don't understand
wp_localize_script('bppv_js','bppv_phcats_obj',array('ajax_url' => admin_url('admin-ajax.php'), ??? ));
2) 我的PHP函数来获取发布的数据
function select_phcats(){
global $wpdb;
$nonce = $_POST['nonce'];
if (!wp_verify_nonce($nonce,'ajax-nonce')){ die ( 'hum… It seems there is a problem…'); }
if(isset($_POST['ph_cats'])){
$PHcats = json_decode($_POST['ph_cats'],true);
$PHcats = $_POST['ph_cats'];
echo 'YEAH! I get my json data!';
}else{
echo 'shit! It doesn't work!';
}
wp_die();
}
当然,我不能在PHP端获取数据。我尝试在wp_localize_script()中指定第三个参数,如下所示:
wp_localize_script('bppv_js','bppv_phcats_obj',array('ajax_url' => admin_url('admin-ajax.php'),'nonce' => wp_create_nonce('ajax-nonce'),'ph_cats' => isset($_POST['ph_cats']) ? $_POST['ph_cats'] : 'no posted data'));
wp_localize_script('bppv_js','bppv_phcats_obj',array('ajax_url' => admin_url('admin-ajax.php'),'nonce' => wp_create_nonce('ajax-nonce'),'ph_cats' => $_POST['ph_cats']));
也像这样:
wp_localize_script('bppv_js','bppv_phcats_obj',array('ajax_url' => admin_url('admin-ajax.php'),'nonce' => wp_create_nonce('ajax-nonce'),'ph_cats' => $PHcats));
我试着看看,如果不在wp_localize_script()中设置数据,这是否可行,如下所示:
wp_localize_script('bppv_js','bppv_phcats_obj',array('ajax_url' => admin_url('admin-ajax.php')));
没有什么对我有用,在网上不同教程的几个主题中,我注意到有些人没有在wp_localize_script()中设置第三个参数,但在Wordpress Codex中,这第三个参数似乎是必需的。。。所以我不明白。。。
对于信息我运行我的脚本在WordPress 4.4.2.
有人知道我该怎么做吗?
感谢您阅读我的问题,并提前感谢您的回复。
诚恳地,
BBFUNK01;)
我认为您不需要使用wp_localize_脚本来完成您的尝试。
为了访问PHP端的POST数据,您需要使用wp_ajax_(action)钩子和/或wp_ajax_nopriv_(action)。第一个钩子用于管理端ajax,第二个钩子用于面向查看器的端。一旦您用其中一个或两个钩子注册了函数,POST数据将自动可用。
例如:
add_action( 'wp_ajax_select_phcats', 'select_phcats' );
add_action( 'wp_ajax_nopriv_select_phcats', 'select_phcats' );
编辑:
我明白你为什么要用wp_本地化_脚本了。似乎您希望将对象用于Nonce值和ajax\u url。在管理端,应该已经为您定义了javascript变量ajaxurl。如果在前端,请添加以下内容:
add_action('wp_head','pluginname_ajaxurl');
function pluginname_ajaxurl() {
?>
<script type="text/javascript">
var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
</script>
<?php
}
那么您的ajax请求将如下所示:
$.post(ajaxurl, data, function(response){
// I display an alert to check the response
alert('Response : '+response);
});
至于使用nonce实现安全性(这是一个好主意!)可以将nonce放在隐藏的输入字段中。这里有一个例子。
我认为你可以使用这样的wp_localize_script来传递nonce和ajax网址:
$nonce = wp_create_nonce( 'my-nonce' );
wp_localize_script('bppv_js','bppv_phcats_obj',array('ajax_url' =>
admin_url('admin-ajax.php'), 'nonce'=> $nonce));
有关如何使用wp_本地化_脚本的更多信息,请参阅本教程。