将工作的AJAX表单转换为使用WordPress

时间:2012-07-02 作者:Ben Jackson

我有一个带有jQuery验证的html表单,并且一直在用AJAX提交数据,我现在正试图将此表单复制到我自己的Wordpress主题中,但我看不出在Wordpress中使用AJAX会出现什么错误。

我正在引用订阅。这是我的表格:

<div id="subscribe">
    <input type="text" id="emailsub" class="text-input" name="email" placeholder="your email address" />
    <input type="submit" src="<?php bloginfo(\'template_directory\'); ?>/images/send.jpg" alt="Send" width="37" height="27" name="#" id="submitsub" class="contactbutton" />
    <br />
    <!-- Email Validation -->
    <span id="errorSubEmail" class="subError"></span>
    <span id="formSubProgress" class="subProgress"></span>
</div>
我正在使用一些jQuery验证,但这里是AJAX:

$.ajax({
        type: "POST",
        url: "http://mywebsite.co.uk/wp/wp-admin/admin-ajax.php",
        data: {
            action: \'ajaxfunction\',
            email: email,
        }   ,
        success: function(msg) {

            //alert(msg);

            // Check to see if the mail was successfully sent
            if(msg==\'Mail sent\') {
                // Update the progress bar
                $(\'.email_wrap #formSubProgress\').html(\'<img src="images/ajax-complete.png" /> Thankyou!\').delay(2000).fadeOut(400);

                // Clear the subject field and message textbox
            //  $(\'.email_wrap #subject\').val(\'\');
            //  $(\'.email_wrap #message\').val(\'\');
            } else {
                $(\'.email_wrap #formSubProgress\').html(\'\');
                alert(\'There was an error sending your email. Please try again.\');
            }

            // Activate the submit button
            $(\'.email_wrap #submitsub\').attr("disabled", "");
        },
        error: function(ob,errStr) {
            $(\'.email_wrap #formSubProgress\').html(\'\');
            alert(\'There was an error sending your email. Please try again.\');

            // Activate the submit button
            $(\'.email_wrap #submitsub\').attr("disabled", "");
        }
    });
以及我的职能。php:

add_action(\'init\', \'add_contact_script\');
function add_contact_script() {
wp_register_script(\'contact\', get_bloginfo(\'template_directory\') . \'/subscribe.js\', array(\'jquery\'), \'1.0\' );
wp_enqueue_script(\'contact\');
}
function ajax_contact() {
if(!isset($_POST[\'email\'])
   ) {
 die(\'Error: aaaa Missing variables\');
}
}

function ajaxfunction() {
//  die("ajaxfunction is called");
if(!isset($_POST[\'email\'])  ) {
    die(\'Error: Missing variables\');
} else {

$email=$_POST[\'email\'];

$to=\'[email protected]\';

$headers = \'The following person has registered to be notified when your webite launches: \'."\\r\\n" ."\\r\\n" .
    \'Email: \'.$email."\\r\\n";

$subject = \'A new person has registered to be updated when you go live\';    

if(mail($to, $subject, 
    $headers)) {
    die(\'Mail sent\');
} else {
    die(\'Error: Mail failed\');
}
}
  } 
   add_action( \'wp_ajax_nopriv_ajaxfunction\', \'ajaxfunction\' );  
   add_action( \'wp_ajax_ ajaxfunction\', \'ajaxfunction\' ); 

1 个回复
SO网友:Milo

您有一个输入错误:wp_ajax_ ajaxfunction. 下划线后有一个空格。

此外,使用wp_localize_script 要设置管理ajax路径,请执行以下操作:

wp_enqueue_script(
    \'contact\',
    get_bloginfo(\'template_directory\') . \'/subscribe.js\',
    array(\'jquery\'),
    \'1.0\'
);
wp_localize_script(
    \'contact\',
    \'ContactAjax\',
    array(
        \'ajaxurl\' => admin_url( \'admin-ajax.php\' )
    )
);
然后在javascript中,使用ContactAjax.ajaxurl

结束

相关推荐

如何在WordPress插件中包含其他jQuery文件和css文件

我有如下jquery文件“公文包.css”“jquery-ui-1.8.18.custom.css”“公文包.js”我想在我的插件中包含这些文件。。。如果有人有办法将上述文件包含到wordpress插件中,请告诉我。。。。请提前谢谢你