AJAX中的自定义登录和注册表

时间:2013-01-04 作者:Elan

如何使用AJAX创建自定义登录/注册表单。

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

以下是完成工作的简单快捷代码:

add_shortcode(\'ajax_login\',\'ajaxlogin_shortcode_handler\');
function ajaxlogin_shortcode_handler($atts,$content=null){
    if (is_user_logged_in())
        return;

    $retval = \'<p id="message" style="color:red"></p>\'
            .wp_login_form(array(\'form_id\' => \'ajaxloginform\',\'echo\' => false)).
            \'<div id="login-result" style="position:absolute; top:300px; left: 670px;">
                <img src="path/ajax-loader.gif"/>
            </div>\';

    $js = <<<JS
<script type="text/javascript">
    jQuery(document).ready(function($){
        $("#ajaxloginform").click(function() {
            // turn loading screen on
            $(\'#login-result\').toggle();
            //get foem data
            var input_data = $(\'#my-login-form\').serialize();
            //make ajax call
            $.ajax({
                type: "POST",
                url: "<?php echo site_url(\'wp-login.php\',\'login_post\'); ?>",
                data: input_data,
                success: function(msg) {
                    // if login incorrect, wordpress will redirect user to its own login form. We scan for an error term.
                    var reg1 = /login_error/g;
                    if (reg1.test(msg)) {
                        $(\'#message\').html("<?php _e(\'Your login credentials is not correct. Please try again.\'); ?>");
                    }else {
                        // login success. redirect users to some page.
                        //$(location).attr(\'href\', \'/my-account/\');
                        //or reload the same page
                        location.reload();
                    }
                }
            });
            // turn loading screen off
            $(\'#login-result\').toggle();
            // prevent actual submission of form
            return false;
        });
    });
</script>
JS;
    //enqueue jquery if its not already loaded
    wp_enqueue_script(\'jquery\');
    return $retval .$js;
}
Usage:

[ajax_login]

结束