2012-07-31 7 views
0

맞춤형 Wordpress ajax 로그인 양식을 만들려고하는데 정렬 할 수 없습니다. 여기에 코드는 제가 사용된다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 ---> 

누군가가 내가 잘못 여기서 뭐하는 거지 말씀해 주시겠습니까?

+0

무슨 일이 벌어지고 또는 오류? –

+0

메시지를 반환하지 않습니다. 콘솔을 사용하고 AJAX/JS 오류가 발생하지 않습니다. – Andrei

답변

1

WordPress의 모든 AJAX 요청은 반드시 wp-admin/admin-ajax.php이되어야합니다. wp-login.php는 응답하지 않습니다. http://codex.wordpress.org/Class_Reference/WP_Ajax_Response

사용할 수있는 일련의 작업이 있지만 로그인 방법과 거의 비슷합니다. 당신은 자신의 행동을 등록 할 수 있으며 자신이 무엇을하고 있는지를 안다면 스스로 로그인 프로세스를 처리 할 수 ​​있습니다. http://codex.wordpress.org/Plugin_API/Action_Reference/wp_ajax_(action)

0
<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; 
    }); 
}); 
+1

나는 그것이 쉬운 방법이라고 생각한다. –