多个Ajax登录表单

问题描述 投票:1回答:1

我在WordPress上有多个登录名,当用户登录时,我想将其重定向到另一个页面。例如。登录表单1,带您到第1页。登录表单2,带您到第2页。

我遵循了http://natko.com/wordpress-ajax-login-without-a-plugin-the-right-way/教程,该教程非常有助于理解其工作原理。

[一切正常,但是表格2尚未提交,并且似乎卡在'发送用户信息,请稍候...。

有人可以帮忙吗?

<div class="half-login">
  <div class="global-login">
    <div class="login-dets">
      <div class="loginform">
        <form id="login" action="login" method="post">
          <p class="status"></p>
          <input id="username" type="text" name="username" placeholder="Username">
          <input id="password" type="password" name="password" placeholder="Password">
          <input class="submit_button" type="submit" value="Login" name="submit">
        </form>
      </div>
    </div>
  </div>
  <div class="exhibition-login">
    <div class="login-dets">
      <div class="loginform">
          <form id="login2" action="login" method="post">
            <p class="status2"></p>
            <input id="username2" type="text" name="username" placeholder="Username">
            <input id="password2" type="password" name="password" placeholder="Password">
            <input class="submit_button" type="submit" value="Login" name="submit">
            <?php wp_nonce_field( 'ajax-login-nonce', 'security' ); ?>
          </form>
        <?php } ?>          
      </div>

    </div>
  </div>    
</div>

JS

jQuery(document).ready(function($) {

    // Perform AJAX login on form submit
    $('form#login').on('submit', function(e){
        $('form#login p.status').show().text(ajax_login_object.loadingmessage);
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: ajax_login_object.ajaxurl,
            data: { 
                'action': 'ajaxlogin', //calls wp_ajax_nopriv_ajaxlogin
                'username': $('form#login #username').val(), 
                'password': $('form#login #password').val(), 
                'security': $('form#login #security').val() },
            success: function(data){
                $('form#login p.status').text(data.message);
                if (data.loggedin == true){
                    document.location.href = "link-1/";
                }
            }
        });
        e.preventDefault();
    });

    // Perform AJAX login on form submit
    $('form#login2').on('submit', function(e){
        $('form#login2 p.status2').show().text(ajax_login_object.loadingmessage);
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: ajax_login_object.ajaxurl,
            data: { 
                'action': 'ajaxlogin', //calls wp_ajax_nopriv_ajaxlogin
                'username': $('form#login2 #username2').val(), 
                'password': $('form#login2 #password2').val(), 
                'security': $('form#login2 #security2').val() },
            success: function(data){
                $('form#login p.status2').text(data.message);
                if (data.loggedin == true){
                    document.location.href = "/link-2/";
                }
            }
        });
        e.preventDefault();
    }); 

});

PHP

function ajax_login_init(){

    wp_register_script('ajax-login-script', get_template_directory_uri() . '/ajax-login-script.js', array('jquery') ); 
    wp_enqueue_script('ajax-login-script');

    wp_localize_script( 'ajax-login-script', 'ajax_login_object', array( 
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'redirecturl' => home_url('/home-page-new'),
        'loadingmessage' => __('Sending user info, please wait...')
    ));

    // Enable the user with no privileges to run ajax_login() in AJAX
    add_action( 'wp_ajax_nopriv_ajaxlogin', 'ajax_login' );
}

// Execute the action only if the user isn't logged in
if (!is_user_logged_in()) {
    add_action('init', 'ajax_login_init');
}

function ajax_login(){

    // First check the nonce, if it fails the function will break
    check_ajax_referer( 'ajax-login-nonce', 'security' );

    // Nonce is checked, get the POST data and sign user on
    $info = array();
    $info['user_login'] = $_POST['username'];
    $info['user_password'] = $_POST['password'];
    $info['remember'] = true;

    $user_signon = wp_signon( $info, false );
    if ( is_wp_error($user_signon) ){
        echo json_encode(array('loggedin'=>false, 'message'=>__('Wrong username or password.')));
    } else {
        echo json_encode(array('loggedin'=>true, 'message'=>__('Login successful, redirecting...')));
    }

    die();
}

非常感谢!

php jquery html wordpress
1个回答
0
投票

鉴于您在评论中提到的错误:

ALERT:-[DOM]找到2个具有非唯一ID #security:的元素]

security字段似乎是某种形式的身份验证,由于重复的id属性,该请求失败。然后,由于请求中的数据丢失/无效,PHP将返回未经授权的响应。

要解决此问题,您需要修复重复的ID(通过使其唯一),然后将值正确地包含在AJAX请求中。

© www.soinside.com 2019 - 2024. All rights reserved.