使用Ajax從數據庫檢查電子郵件時出錯

Question

我已經從這里的幾個用戶那里讀取了答案，我的目的是檢查電子郵件是否已經在數據庫上。

所以我的代碼如下

**HTML CODE**
<div class="form-group">
                  <div class="col-sm-12">
                    <div class="input-group">
                      <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                      <input id="fnam" name="firstname" class="profile-input form-control" type="text" placeholder="First Name" autocomplete="off" maxlength="25" required />

                     <!-- <input id="fullname" name="fullname" class="form-control" placeholder="Full Name" required="" type="text">-->
                    </div>
                  </div>
                </div>
            </fieldset>

            <fieldset>
            <!-- Prepended text Last Name-->
                <div class="form-group">
                  <div class="col-sm-12">
                    <div class="input-group">
                      <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                      <input id="lastname" name="lastname" class="profile-input form-control" type="text" placeholder="Last Name" autocomplete="off" maxlength="25" required />
             <!-- <input id="fullname" name="fullname" class="form-control" placeholder="Full Name" required="" type="text">-->
                    </div>
                  </div>
                </div>
            </fieldset>

            <fieldset>
                <!-- Prepended text Email-->
                <div class="form-group">
                  <div class="col-sm-12">
                    <div class="input-group">
                      <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
                      <input id="email" name="email"  class="profile-input form-control" type="email" placeholder="Email" autocomplete="off" maxlength="50"  required/>
            <!-- <input id="email" name="email" class="form-control" placeholder="Email" required="" type="text">-->
                    </div>
                  </div>
                </div>

JS / AJAX

 function chemail(inputText) {
 var email1 = $("#email").val();
 var x = document.forms["myappForm"]["email"].value;
 var datastring = '$email='+ x; // get data in the form manual



 //var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;  


    var atpos = x.indexOf("@");
    var dotpos = x.lastIndexOf("."); 

// if(inputText.value.match(mailformat)){

  if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {

var msgp="Invalid Email. Ex: abc@ggggg.com";
    document.getElementById("msgreturn").style.color= "red";
     document.getElementById("msgreturn").innerHTML = msgp;
      document.getElementById("lem").style.color= "red";
document.myappForm.email.focus();  


return false;  
}  


else  
{  
 document.myappForm.email.focus();  
 var msgp="Email verified";
    document.getElementById("msgreturn").style.color= "green";
     document.getElementById("msgreturn").innerHTML = msgp;
      document.getElementById("lem").style.color= "green";

return true;  


$("span.loading").html("<img src='images/ajax_fb_loader.gif'>");
        $("span.validation").html("");
        var datastring = '&email='+ x;
        $.ajax({
                    type: "POST", // type
                    url: "check_email.php", // request file the 'check_email.php'
                    data: datastring, // post the data
                    success: function(responseText) { // get the response
                        if(responseText == 1) { // if the response is 1
                            $("span.email_val").html("<img src='images/invalid.png'> Email are already exist.");
                            $("span.loading").html("");
                        } else { // else blank response
                            if(responseText == "") {
                                $("span.loading").html("<img src='images/correct.png'> You are registred.");
                                $("span.validation").html("");
                                $("form input[type='text']").val(''); // optional: empty the field after registration
                            }
                        }
                    }
                                    } 
 }

和check_email.php

<?php require_once("../../php_includes/dbconnect.php"); 

$email = $_POST['x']; 
$query = mysql_query("SELECT 'email' FROM 'members' WHERE 'email' = '$email'"); 
if(mysql_num_rows($query) == 1) {  echo '1'; } else {  echo '1'; } 

?>

因此，所有消息源都可以正常工作，我已經在ajax內設置了一些警報，但沒有成功，您能告訴我我在哪里出錯了嗎？我正在從該站點的其他用戶那里獲取示例，但是可以無法解決。

Answer 1

假設您已經直接復制了代碼，則可以通過檢查縮進找到錯誤。 順便說一句，我建議您讓編輯器用空格替換制表符，因為制表符可能無法在任何其他系統（例如SO！）上正確顯示間距。

function chemail(inputText) {
  var email1 = $("#email").val();
  var x = document.forms["myappForm"]["email"].value;
  var datastring = '$email='+ x; // get data in the form manual



  //var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;  


  var atpos = x.indexOf("@");
  var dotpos = x.lastIndexOf("."); 

  // if(inputText.value.match(mailformat)){

  if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {

    var msgp="Invalid Email. Ex: abc@ggggg.com";
    document.getElementById("msgreturn").style.color= "red";
    document.getElementById("msgreturn").innerHTML = msgp;
    document.getElementById("lem").style.color= "red";
    document.myappForm.email.focus();  

    return false;  
  }  

  else

  {  
    document.myappForm.email.focus();  
    var msgp="Email verified";
    document.getElementById("msgreturn").style.color= "green";
    document.getElementById("msgreturn").innerHTML = msgp;
    document.getElementById("lem").style.color= "green";

    return true;  

   // HERE'S THE PROBLEM!!! The following code never gets executed.  Missing parenthesis.

    $("span.loading").html("<img src='images/ajax_fb_loader.gif'>");
    $("span.validation").html("");
    var datastring = '&email='+ x;
    $.ajax({
      type: "POST", // type
      url: "check_email.php", // request file the 'check_email.php'
      data: datastring, // post the data
      success: function(responseText) { // get the response
        if(responseText == 1) { // if the response is 1
          $("span.email_val").html("<img src='images/invalid.png'> Email are already exist.");
          $("span.loading").html("");
        } else { // else blank response
          if(responseText == "") {
            $("span.loading").html("<img src='images/correct.png'> You are registred.");
            $("span.validation").html("");
            $("form input[type='text']").val(''); // optional: empty the field after registration
          }
        }
      }
    } 
  } // <--- this parenthesis is in the wrong place.

提示您該問題的另一件事是使用Web控制台中的“網絡”選項卡。 您可以使用它來查看瀏覽器和服務器之間的流量。 在這種情況下，您會發現沒有對PHP腳本的請求。

---

附錄：

我相信datastring應該是一個對象，而不是url編碼。 換一種說法，

var datastring = {email: x};

其中x = $('#email').val();

值得一提的是，由於您使用的是針對Ajax的JQuery，因此更改以下內容更簡潔

document.getElementById("msgreturn").style.color= "red"; 到$('#msgreturn').css('color','red');