2011-07-28 31 views
0

我是AJAX的新手,我正在創建一個使用AJAX發送數據的註冊表單。 我跟着一個教程,驗證輸入字段不是空的,然後將值發送到一個PHP文件,並將它們保存到數據庫...它的工作原理。但我也試圖集成一個額外的腳本來檢查用戶名是否被佔用。在AJAX驅動的註冊表中發送數據到PHP的問題

如果我僅使用-only腳本來檢查用戶名的可用性,而不使用教程,它就像一個魅力。但問題是,當我試圖將兩個腳本結合起來。 有人可以幫我指出我的錯誤嗎?我嘗試了很多東西,他們只是整部劇本的一部分,但並非全部。

這裏的教程的腳本模型:

$(function() { 
$('.error').hide(); 
$(".button").click(function() { 
    // validate and process form 
    // first hide any error messages 
$('.error').hide(); 

    var name = $("input#name").val(); 
    if (name == "") { 
    $("label#name_error").show(); 
    $("input#name").focus(); 
    return false; 
} 
    var email = $("input#email").val(); 
    if (email == "") { 
    $("label#email_error").show(); 
    $("input#email").focus(); 
    return false; 
} 
    var phone = $("input#phone").val(); 
    if (phone == "") { 
    $("label#phone_error").show(); 
    $("input#phone").focus(); 
    return false; 
} 

    var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone; 
    //alert (dataString);return false; 

    $.ajax({ 
    type: "POST", 
    url: "bin/process.php", 
    data: dataString, 
    success: function() { 
    $('#contact_form').html("<div id='message'></div>"); 
    $('#message').html("<h2>Contact Form Submitted!</h2>") 
    .append("<p>We will be in touch soon.</p>") 
    .hide() 
    .fadeIn(1500, function() { 
     $('#message').append("<img id='checkmark' src='images/check.png' />"); 
    }); 
    } 
}); 
return false; 
}); 
}); 

這裏是我的用戶名檢查工作代碼:

$(function() { 
$('.error').hide(); 

$(".button").click(function() { 
$('.error').hide(); 
    // validate and process form here 

var checkdata = username ['value']; 
//alert ("usuario guardado =" + checkdata); 

$.get("usernameCheck.php", { username: checkdata }, 
function(data){ 
//alert("Data Loaded: " + data); 

    if (data == 0) 
    { 
    $("label#misuser_error").show(); 
    $("input#username").focus(); 
    return false; 
    } 


}); 



return false; 


}); 
}); 

這是我的企圖都結合:

$(function() { 
$('.error').hide(); 
$(".button").click(function() { 
$('.error').hide(); 
    // validate and process form here 
    var flag = 1; 
    var username = $("#username").val(); 
    var password = $(" #password").val(); 
    var passwordC = $(" #password_confirm").val(); 
    var type = $(" #type").val(); 
    var name = $("#firstname").val(); 
    var lastname = $(" #lastname").val(); 
    var day = $(" #bdate_day").val(); 
    var month = $(" #bdate_month").val(); 
    var year = $(" #bdate_year").val(); 
    var email = $(" #email").val(); 
    var country = $(" #country").val(); 
    var state = $(" #state").val(); 
    var city = $(" #city").val(); 
    var payment_email = $(" #payment_email").val(); 


    if (username == "") { 
    $("#username_error").show(); 
    $("#username").focus(); 
    return false; 
    } 
    else { 

     if (password == "") { 
     $(" #password_error").show(); 
     $(" #password").focus(); 
     return false; 
     } 
     else { 

      if (passwordC == "") { 
      $(" #password_confirm_error").show(); 
      $(" #password_confirm").focus(); 
      return false; 
      } 
      else { 
       if (password != passwordC) { 
       $(" #password_mismatch_error").show(); 
       $("#password_confirm").focus(); 
       return false; 
       } 
       else { 

        if (type == "") { 
        $(" #type_error").show(); 
        $(" #type").focus(); 
        return false; 
        } 
        else { 

         if (name == "") { 
         $("#firstname_error").show(); 
         $("#firstname").focus(); 
         return false; 
         } 
         else { 

          if (lastname == "") { 
          $(" #lastname_error").show(); 
          $(" #lastname").focus(); 
          return false; 
          }  
          else { 

           if (day == "") { 
           $(" #bdate_day_error").show(); 
           $(" #bdate_day").focus(); 
           return false; 
           }  
           else { 

            if (month == "") { 
            $(" #bdate_month_error").show(); 
            $(" #bdate_month").focus(); 
            return false; 
            }  
            else { 

             if (year == "") { 
             $(" #bdate_year_error").show(); 
             $(" #bdate_year").focus(); 
             return false; 
             }  
             else { 

              if (email == "") { 
              $(" #email_error").show(); 
              $(" #email").focus(); 
              return false; 
              }  
              else { 

               if (state == "") { 
               $("#state_error").show(); 
               $(" #state").focus(); 
               return false; 
               } 
               else { 

                if (city == "") { 
                $("#city_error").show(); 
                $(" #city").focus(); 
                return false; 
                }  
                else { 

                 if (payment_email == "") { 
                 $("#payment_email_error").show(); 
                 $(" #payment_email").focus(); 
                 return false; 
                 } 
                 else { 
                   var flag = 1; 
                  } 
                 } 
                } 
               } 
              } 
             } 
            } 
           } 
          } 
         } 
        } 
       } 
      } 
     } 


if (flag === 1) { 

var checkdata = document.getElementById('username').value; 
//alert ("usuario guardado =" + checkdata); 

    $.get("usernameCheck.php", { username: checkdata }, 
     function(data){ 
      //alert("Data Loaded: " + data); 

      if (data === 0) { 
      $("label#misuser_error").show(); 
      $("input#username").focus(); 
      return false; 
      } 

    }); 


} 



(function (save) { 
       //alert ("usuario guardado: " + checkdata); 
       $.get("insert_user.php", { username: checkdata }, 
       function(sent){ 



       ('#userForm').html("<div id='message'></div>"); 
        $('#message').html("<h2>Contact Form Submitted!</h2>") 
        .append("<p>We will be in touch soon.</p>") 
        .hide() 
        .fadeIn(1500, function() { 
        $('#message').append("<img id='checkmark' src='images/check.png' />"); 
        }); 


        }); 
      return false; 
      }); 



}); 
}); 

任何想法,任何人? 我知道我可能會做所有錯誤的方式,但我只通過學習教程學習PHP/Javascript和AJAX。所以對我有一些憐憫。

非常感謝您的幫助。

回答

0

首先,我認爲你正在爲自己創建一個不必要的頭痛,通過構建你的驗證代碼。請記住,return false使執行離開該函數,因此您不需要深入嵌套的if-else結構。

而不是這樣的:

if(test) { 
    // fail 
} else { 
    // second test 
} 

使用這樣的

if(test) { 
    // fail 
} 

if(test2) { 
    // fail 
} 

// success 

這是安全的,因爲「失敗」的代碼,通過返回false,將阻止執行到達「成功「後面的代碼。

下面是您腳本的修改版本。注意:我刪除了很多驗證檢查,然後添加了兩個檢查,以便看到我推薦的模式;你會想在所有其他必要的測試中加回來。

$(function() { 
    $('.error').hide(); 
    $(".button").click(function() { 

     $('.error').hide(); 

     // validate and process form here 
     var flag = 1; 
     var username = $("#username").val(); 
     var password = $(" #password").val(); 
     var passwordC = $(" #password_confirm").val(); 
     var type = $(" #type").val(); 
     var name = $("#firstname").val(); 
     var lastname = $(" #lastname").val(); 
     var day = $(" #bdate_day").val(); 
     var month = $(" #bdate_month").val(); 
     var year = $(" #bdate_year").val(); 
     var email = $(" #email").val(); 
     var country = $(" #country").val(); 
     var state = $(" #state").val(); 
     var city = $(" #city").val(); 
     var payment_email = $(" #payment_email").val(); 

     if(!username.length) { 
      $("username_error").show(); 
      $("username").focus(); 
      return false; 
     } 

     if(!password.length) { 
      $("#password_error").show(); 
      $("#password").focus(); 
      return false; 
     } 

     // ... other checks 
     var checkdata = $("username").val(); 

     $.get("usernameCheck.php", { username: checkdata }, function(data) { 

      if(data === 0) { 
       $("label#misuser_error").show(); 
       $("#username").focus(); 
       return false; 
      } 

      // DO SAVE HERE 
      $.post("insert_user.php", { username: checkdata }, function(sent){ 
       ('#userForm').html("<div id='message'></div>"); 
       $('#message').html("<h2>Contact Form Submitted!</h2>") 
        .append("<p>We will be in touch soon.</p>") 
        .hide() 
        .fadeIn(1500, function() { 
         $('#message').append("<img id='checkmark' src='images/check.png' />"); 
        }); 
       }); 
     }); 
    }); 
}); 

還有一點需要注意:服務器上更改狀態的請求應該是POST,而不是GET。我上面的示例代碼表明。

0

呃。不是在談論你的AJAX請求,但最佳實踐通常說,超過3個嵌套'if'是不好的。使用這樣的事情,而不是:

var fields = ['username', 'password', 'password_confirm', ... ]; 
var length = fields.length; 
for (var i=0; i<length; i++) { 
    if ($('#' + fields[i]).val() == "") { 
    $('#' + fields[i] + '_error').show(); 
    $('#' + fields[i]).focus(); 
    } 
} 

此外,您$(".error").hide()在你的第三行是無用的。

最後,我猜不工作的部分是你的匿名(function (save)...。該功能從未執行。在最後添加();以執行它。

編輯:下面的答案顯示了一個更好的方式爲您的AJAX部分。

1

好吧,我會誠實 - 我沒有閱讀你的代碼的每一行。但我一遍又一遍地做了這樣的事情,我可以告訴你一些能夠防止你出錯的事情。

  1. 創建「datastring」時試試用jquery的serialize方法。也知道你可以發送你的data as an object,不一定是一個字符串。 jquery會將對象轉換爲「?a = b & c = d」。
  2. 驗證時,不要做這種「if if if」。以jQuery的方式 - 使用插件,或自己寫。它會讓你的代碼更容易閱讀
  3. 使用firebug。在AJAX返回,console.log您返回的數據,看看你的PHP有關你的請求說。
  4. 當做一個單獨的「用戶名可用」檢查時,不要在「插入用戶」中獲得相同的檢查 - 競賽條件發生,爲他們計劃。
  5. 檢查你的語法,並檢查你的方法是否被調用。 Firebug也會幫助你。