-1

我正在创建这个 wordpress 插件，它运行良好，但在使用 ajax 的 subimt 数据中存在问题。我已经创建了 ajax 代码，但它不起作用。

请帮忙弄清楚

谢谢你

这是代码

    <script>
var data = {
    action: 'join_mailinglist',
    email: email
};

jQuery("#mailinglistsubmit").hide();
jQuery(".ajaxsave").show();
jQuery.post("<?php echo admin_url('admin-ajax.php'); ?>", data,
function(response){
    jQuery(".ajaxsave").hide();
    jQuery("#mailinglistsubmit").show();
});     

return false;

</script>

<?php
/*
Plugin Name: MyFirst
Plugin URI: http://zachis.it
Description: ajax form.
Version: 1.0
Author: Zachary Smith
Author URI: http://zachis.it
License: GPL2
*/
?>


<?php
 /* What to do when the plugin is activated? */
register_activation_hook(__FILE__,'my_first_plugin_install');

/* What to do when the plugin is deactivated? */
register_deactivation_hook( __FILE__, 'my_first_plugin_remove' );

function my_first_plugin_install() {
/* Create a new database field */
add_option("my_first_data", 'Testing !! My Plugin is Working Fine.', 'This is my first plugin panel data.', 'yes');
}

function my_first_plugin_remove() {
/* Delete the database field */
delete_option('my_first_data');

} 


add_action('admin_menu', 'my_first_admin_menu');
function my_first_admin_menu() {
add_options_page('Plugin Admin Options', 'My Plugin Settings', 'manage_options',
'my-first', 'plugin_admin_options_page');
}
?>

<?php
function plugin_admin_options_page() {
?>
<div class="wrap">
<?php screen_icon(); ?>
<h2>Plugin Options Admin Page</h2>
</div>
<div class="content">

<div class="output"><p><?php echo get_option('my_first_data'); ?></p></div>
<p>
<form method="post" action="options.php">
<?php wp_nonce_field('update-options'); ?>
<h2>Enter Text: </h2>
<textarea name="my_first_data" id="my_first_data" cols="200" rows="20"></textarea>
<input type="hidden" name="action" value="update" />
<input type="hidden" name="page_options" value="my_first_data" /><br />
<input style="position: fixed; left: 40%;" id="mailinglistsubmit" type="submit" value="Save Changes" /><img src="<?php admin_url(); ?>/wp-admin/images/wpspin_light.gif" alt="" class="ajaxsave" style="display: none;" />
</form>
</p>
</div>
<?php
}
?> 
<?php add_action('wp_ajax_my_action', 'my_action_callback');
add_action('wp_ajax_nopriv_my_action', 'my_action_callback'); 
?>

<?php function join_mailinglist_callback() {
    $email = $_POST['email'];
    if(!empty($email)) {
        $yourEmail = 'c@bavotasan.com';
        $subject = 'Add me to your mailing list';
        $success = mail($yourEmail, $subject, $email);
        if(!empty($success)) {
            echo 'Your email is subscribed to our mailing list.';
        } else {
            echo 'There was a problem. Please try again.';
        }
    }
    die();
} ?>


<style>
.content { padding-left:150px;}
.output p {width:700px; height:auto;}
</style>
4

1 回答 1

1

我看到你的这个插件有几个问题。

首先，为什么你的 JavaScript 代码会附加到插件的顶部？在 WordPress 中包含 JS 的正确方法是将其放在单独的 .js 文件中，并通过使用 .js 将其加入队列来加载wp_enqueue_script()。底部的样式也是如此。

一个例子如下：

function my_scripts_method() {
    wp_enqueue_script(
        'your-script-name',
        plugins_url( 'js/your-script.js' , __FILE__ ),
        array('jquery')
    );
}
add_action('wp_enqueue_scripts', 'my_scripts_method');

其次，您的 PHP 插件文件不得输出任何内容，这意味着您不应?>在标题后看到任何标签，因为这会输出一些换行符。

接下来，为了在你的静态 JS 文件中获取 admin-ajax-url，你应该使用这个函数：

wp_localize_script( 'ajax_get_permalink', 'ajax_get_permalink', array(
    ajax_url =>  admin_url( 'admin-ajax.php' )  
));

在您的 JS 文件中，您应该将主代码包装在一个在表单提交时调用的函数中。

function mailingListSubmit() {
    var data = {
        action: 'join_mailinglist',
        email: jQuery('#mailingListEmail')
    };

    jQuery("#mailinglistsubmit").hide();
    jQuery(".ajaxsave").show();
    jQuery.post(ajax_get_permalink.ajax_url, data,
    function(response){
        jQuery(".ajaxsave").hide();
        jQuery("#mailinglistsubmit").show();
    });
}

最后，你的动作钩子也是错误的。您从法典（或谁知道在哪里）复制了它，但甚至懒得阅读文档。

add_action('wp_ajax_my_action', 'my_action_callback');

您需要更改my_action_callback以反映您的函数名称join_mailinglist_callback以及您在 JS 文件中定义的操作wp_ajax_my_action。wp_ajax_join_mailinglist

上述代码未针对语法错误进行测试，但应为您指明正确的方向。即使您复制并粘贴这些代码，您也不应该期望您的插件能神奇地工作。

在此处阅读有关 WordPress 插件中 AJAX 的更多信息：http: //codex.wordpress.org/AJAX_in_Plugins

于 2012-12-05T18:22:17.483 回答