Wordpress AJAX登录

Question

我正在尝试构建自定义的wordpress ajax登录表单，但无法对其进行排序。这是我使用的代码：

HTML：

            <form class="well form-inline" id="login">
                <div class="rowmargin">
                    <h4>Login</h4>
                </div>
                <div class="rowmargin">
                    <input type="text" name="username" id="loginUsername" class="input-medium" placeholder="Username">
                    <input type="password" name="password" id="loginPassword" class="input-medium" placeholder="Password">
                </div>
                <a class="btn btn-primary" id="loginButton"><i class="icon-check icon-white"></i> Login</a>
            </form>

JS：

    <script type="text/javascript">

        $(document).ready(function() {

            $("#loginButton").click(function() {    

                var username = $('#loginUsername').val();
                var password = $('#loginPassword').val();
                var rememberme = "forever";
                var redirect = '<?php bloginfo('url'); ?>';

                var data = {
                    user_login:     username,
                    user_password:  password,
                    remember:       rememberme,
                    redirect_to:    redirect
                }

                $.ajax({
                    url: '<?php bloginfo('url'); ?>/wp-login.php',
                    data: data,
                    type: 'GET',
                    dataType: 'jsonp',
                    success: function( result ) {
                        if (result.success==1) {
                            alert("Ok!");
                        } else {
                            alert("Not Ok!");
                        }
                    }
                }); 

            });

        });

        </script> <!-- Login Script --->

有人可以告诉我我在做什么错吗？

Answer 1

您需要使用wp功能进行登录。

Answer 2

WordPress中的所有AJAX请求都必须通过wp-admin/admin-ajax.php。 wp-login.php不会回应。http://codex.wordpress.org/Class_Reference/WP_Ajax_Response

Answer 3

<form class="well form-inline" id="login">
    <div id="message"></div>
    <div id="loading" style="display:none;"></div>
    <div class="rowmargin">
        <h4>Login</h4>
    </div>
    <div class="rowmargin">
        <input type="text" name="username" id="loginUsername" class="input-medium" placeholder="Username">
        <input type="password" name="password" id="loginPassword" class="input-medium" placeholder="Password">
    </div>
    <a class="btn btn-primary" id="loginButton"><i class="icon-check icon-white"></i> Login</a>
</form>


jQuery(document).ready(function(){      
    jQuery('#loading').hide();
    jQuery("#loginButton").click(function() {   
        jQuery('#message').hide().html('');
        jQuery('#loading').hide();
        var input_data = jQuery('#login').serialize();
        var logUser = jQuery('#loginUsername').val();
        var logPass = jQuery('#loginPassword').val();

        if(logUser == '' && logPass != ''){ jQuery('#message').show().html('Your Username is empty!'); return false; }
        if(logPass == '' && logUser != ''){ jQuery('#message').show().html('Your Password is empty!'); return false; }
        if(logUser == '' && logPass == ''){ jQuery('#message').show().html('Your Username and Password is empty!'); return false; } 

        jQuery('#loading').show();
        jQuery.ajax({
            type: "POST",
            url: "<?php echo site_url('wp-login.php','login_post'); ?>",
            data: input_data,
            success: function(msg) {                                    
                // login success. redirect users to some page.
                jQuery(location).attr('href', '<?php echo home_url( '/thank-you/' ); ?>');

            },
            error: function(msg) {  
                // login error.                 
                jQuery('#message').show();
                jQuery('#message').html("<?php _e('Your login  is not correct. Please try again.'); ?>");
                jQuery('#loading').hide();
            }

        }); 
        return false;
    });
});

Answer 4

WordPress：简单的Ajax登录表单