2011-09-22 49 views
0

好的,我从JSON获取PHP表单的结果以进行登录验证。我想检查一下他们的账户是否已经激活,我做得很好。如果不是,我会显示一个jQuery错误,但我希望能够让他们重新发送激活邮件。我可以将用户名密码传递给显示JSON错误的函数,但是如何将这些数据传递给新函数以处理新电子邮件?这是我到目前为止:将2个变量从1个函数传递给另一个jquery

// LOGIN Validation 

$(function(){ 
    $("#jq_login").submit(function(e){ 
    e.preventDefault(); 

    $.post("widgets/login_process.php", $("#jq_login").serialize(), 
     function(data){  
     if(data.all_check == 'invalid'){ 
      $('div.message_error').hide(); 
      $('div.message_success').hide(); 
      $('div.message_error').fadeIn(); 
      $('div.message_error').html(
      "<div>UserId and/or password incorrect. Try again.</div>" 
     ); 

     } elseif(data.user_check == 'invalid'){ 
      $('div.message_error').hide(); 
      $('div.message_success').hide(); 
      $('div.message_error').fadeIn(); 
      $('div.message_error').html(
      "<div>UserId and/or password incorrect. Try again.</div>" 
     ); 

     } elseif (data.activated_check == 'invalid'){ 
      $('div.message_error').hide(); 
      $('div.message_success').hide(); 
      $('div.message_error').fadeIn(); 
      $('div.message_error').html(
      "<div>Your account has not been activated. Please check your " + 
      "email and follow the link to activate your account. Or click " + 
      "<a href='#' id='resend'>here</a> to re-send the link.</div>" 
     ); 

     } else { 
      $('div.message_error').hide(); 
      $('div.message_success').fadeIn(); 
      $('div.message_success').html(
      "<div'>You are now logged in. Thank you </div>" 
     ); 

      window.location.replace("producer.php"); 
      return false; 
     } 
     }, "json"); 
    }); 
    });    

    $(function(){ 
    $("#resend").live('click', function(event){ 
     event.preventDefault(); 
     alert(data.username); 

     var data = 'username=' + data.username + 'password=' + data.password; 

     $.ajax 
    });     
    }); 

我是新的,所以我不明白来回传递数据的所有细节。

谢谢。

克雷格

回答

0

有了Ajax,并不是真的“来回传递数据”,而只是传递回调。当你把function() { ... }作为函数参数时,你就是这么做的 - 你正在创建一个回调函数。

我认为最好的行动方式是将其重构为几个独立的功能。最好的做法是让每个函数只做一件事,而不是在函数内的函数内定义函数。

一旦重构,我们将更清楚地知道我们如何“重用”重新发送激活链接的用户名和密码。

(function() { // to keep these functions out of the global scope(†) 
    // this will be called when the login form is submitted 
    function handleLogin(evt) { 
    evt.preventDefault(); 

    // same as your code except that instead of creating a function here 
    // we instead pass `handleLoginResponse`, which is a function we'll 
    // define later 
    $.post('widgets/login_process.php', 
     $(this).serialize(), // <-- In events, `this` refers to the element that 
     handleLoginResponse, //  fired the event--in this case the form, so we 
     'json'    //  don't need its id, we can just give `this` 
    );      //  to jQuery. 
    } 

    // This is the function we gave to $.post() above, and it'll be called when 
    // the response is received. 
    function handleLoginResponse(data) { 
    // Here we decide what message to show based on the response, just like 
    // in your code, but we call a function (showError or showSuccess) to 
    // avoid repeating ourselves. 
    if(data.all_check == 'invalid') { 
     showError("UserId and/or password incorrect. Try again."); 

    } else if(data.user_check == 'invalid') { 
     showError("UserId and/or password incorrect. Try again."); 

    } else if(data.activated_check == 'invalid') { 
     showError("Your account has not been activated. Please check your " + 
       "email and follow the link to activate your account. Or " + 
       "click <a href='#' id='resend'>here</a> to re-send the link." 
    ); 

    } else { 
     showSuccess("You are now logged in. Thank you."); 
     redirectToLoggedInPage(); 
    } 
    } 

    // the function that shows error messages 
    function showError(message) { 
    $('.message_success').hide(); 
    $('.message_error').hide().   // jQuery chaining keeps things tidy 
     html('<div>' + message + '</div>'). 
     fadeIn(); 
    } 

    // the function that shows success messages 
    function showSuccess(message) { 
    $('div.message_error').hide(); 
    $('div.message_success').fadeIn(). 
     .html('<div>' + message '</div>'); 
    } 

    // this method is called when the "resend" link is clicked 
    function handleResendClicked(evt) { 
    evt.preventDefault(); 

    // send another Ajax request to the script that handles resending, using 
    // the form values as parameters 
    $.get('./resend_activation.php', 
     $('#jq_login').serialize(), 
     handleResendResponse // again we've defined this function elsewhere 
    ); 
    } 

    // called when the Ajax request above gets a response 
    function handleResendResponse(data) { 
    // of course you can do whatever you want with `data` here 
    alert('resend request responded with: ' + data); 
    } 

    // called from handleLoginResponse when the login is successful 
    function redirectToLoggedInPage() { 
    window.location = './producer.php'; 
    } 

    // finally, our document.ready call 
    $(function() { 
    // pass the names of the functions defined above to the jQuery 
    // event handlers 
    $("#jq_login").submit(handleLogin); 
    $("#resend").live('click', handleResendClicked); 
    }); 
}()); 

当然,你不会总是这样的代码 - 有时它确实是最好只是当场定义匿名function() { ... } - 但是当事情变得嵌套三个层次深,这是一个解决问题的好方法,并且趋向于使得前进的道路更加清晰。

(†)Anonymous closures for limiting scope

+0

感谢乔丹......这非常有帮助。我实际上是通过将resend_activation放在原来的回调中来实现的。但我的代码是一团糟。正如我所说,我是新手,所以看到正确的方式很有意义。我现在要用你的逻辑重新写一大堆东西。再次感谢! –

0

能服务器只需追加与返回的JSON的确认链接?

 $('div.message_error').html(
     "<div>Your account has not been activated. Please check your " + 
     "email and follow the link to activate your account. Or click " + 
     "<a href='" + data.activation_url + "' id='resend'>here</a> to re-send the link.</div>" 
    ); 
+0

我不明白这会做什么。 data.activation_url会在JSON中寻找一个名为“activation_url”的键,除非我不理解某些东西。 –

+0

是的。这正是它会做的。这显然需要更改服务器端代码,以便将其中已有的所有内容都发回给它。换句话说,我将问题推给服务器来解决,而不是客户端的JavaScript。 –

相关问题