Question

我正在创建这个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>

Answer 1

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

首先，为什么你的JavaScript代码会附加到插件的顶部？在WordPress中包含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和wp_ajax_my_action到wp_ajax_join_mailinglist - 您在JS文件中定义的操作。

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

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

Ajax无法在提交按钮中工作

1 个答案: