電子メールの重複をチェックするためにサインアップ用のブートストラップコードを変更するにはどうすればよいですか？

Question

私は通常のcontact_meフォームのデフォルトコードを使用しています。サーバーの応答（私の理解から）に基づいて成功または失敗をもたらします。このコードは、データベースとの通信を処理するmsend_form.phpを呼び出します。常に真を返します。私はdb内の既存の既存の電子メールをチェックすることができます。問題は、それをサーバー応答だけでなく既存の電子メールにもエラーを表示するように、それをajaxコードにどのように渡すことができるかです。 msend_form.phpで

$.ajax({ 
     url: "././mail/msend_form.php", 
     type: "POST", 
     data: { 
      fname: firstName, 
      gender: gender, 
      email: email 
     }, 
     cache: false, 
     success: function() { 
      // Success message 
      $('#success').html("<div class='alert alert-success'>"); 
      $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;") 
       .append("</button>"); 
      $('#success > .alert-success') 
       .append("<strong>Thank you for registering! </strong>"); 
      $('#success > .alert-success') 
       .append('</div>'); 

      //clear all fields 
      $('#contactForm').trigger("reset"); 
     }, 
     error: function() { 
      // Fail message 
      $('#success').html("<div class='alert alert-danger'>"); 
      $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;") 
       .append("</button>"); 
      $('#success > .alert-danger').append("<strong>Sorry " + firstname + ", it seems that my mail server is not responding. Please try again later!"); 
      $('#success > .alert-danger').append('</div>'); 
      //clear all fields 
      $('#contactForm').trigger("reset"); 
     }, 
    }) 

コード：

<?php 
// insert in sql database 
include '../db_connect.php'; 


// check if fields passed are empty 
if(empty($_POST['fname'])  || 
    empty($_POST['email'])  || 
    !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL)) 
    { 
    echo "No arguments Provided!"; 
    return false; 
    } 

$fname = mysql_real_escape_string($_POST['fname']); 
$email_address = mysql_real_escape_string($_POST['email']); 
$gender = mysql_real_escape_string($_POST['gender']); 
$ip = 1; 

$sqlemail=mysql_query('SELECT * FROM `sdusers` WHERE email="'.$email_address.'"'); 
$res2=mysql_num_rows($sqlemail); 

if($res2>=1) 
{ 
    echo 'Email already in use'; 

} 
else 
{ 
    //insert query goes here 
    $sql='INSERT INTO `sdusers` (fname, gender, email, ip, time_registered) VALUES ("'.$fname.'","'.$gender.'","'.$email_address.'","'.$ip.'",CURRENT_TIMESTAMP)'; 
    $res3=mysql_query($sql); 

} 

mysql_close($link); 

return true;    
?> 

のindex.phpのコード：

 <form name="sentMessage" id="contactForm" novalidate> 
      <div class="row control-group"> 
       <div class="form-group col-xs-12 floating-label-form-group controls"> 
        <label>First Name</label> 
        <input type="text" class="form-control" placeholder="First Name" id="fname" required data-validation-required-message="Please enter your first name."> 
        <p class="help-block text-danger"></p> 
       </div> 
      </div> 
      <div class="row control-group"> 
       <div class="form-group col-xs-12 floating-label-form-group controls"> 
        <label>Email Address</label> 
        <input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address."> 
        <p class="help-block text-danger"></p> 
       </div> 
      </div> 
      <div class="row control-group"> 
       <div class="form-group col-xs-12 floating-label-form-group controls"> 
        <label>Gender</label> 
        <select id="gender" name="gender" class="form-control"> 
         <option value="female">Female</option> 
         <option value="male">Male</option> 
        </select> 
       </div> 
      </div> 

      <br> 
      <div id="success"></div> 
      <div class="row"> 
       <div class="form-group col-xs-12"> 
        <button type="submit" class="btn btn-outline-dark">Submit</button> 
       </div> 
      </div> 
     </form> 

おかげ

UPDATEここmsend_form.jsのコードがあります：

$.ajax({ 
       url: "././mail/msend_form.php", 
       type: "POST", 
       data: { 
        fname: firstName, 
        gender: gender, 
        email: email 
       }, 
       dataType: "json", 
       cache: false, 
       success: function(response) { 
        if(response.status == 1){ 
         // ok 
         // Success message 
         $('#success').html("<div class='alert alert-success'>"); 
         $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;") 
          .append("</button>"); 
         $('#success > .alert-success') 
          .append("<strong>Thank you for registering! We will contact you once this app is deployed soon. </strong>"); 
         $('#success > .alert-success') 
          .append('</div>'); 
        }else{ 
         // fail 
         // Danger message 
         $('#success').html("<div class='alert alert-danger'>"); 
         $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;") 
          .append("</button>"); 
         $('#success > .alert-danger') 
          .append("<strong>Email address already in use. </strong>"); 
         $('#success > .alert-danger') 
          .append('</div>'); 
        } 


        //clear all fields 
        $('#contactForm').trigger("reset"); 
       }, 
       error: function() { 
        // Fail message 
        $('#success').html("<div class='alert alert-danger'>"); 
        $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;") 
         .append("</button>"); 
        $('#success > .alert-danger').append("<strong>Sorry " + firstname + ", it seems that my mail server is not responding. Please try again later!"); 
        $('#success > .alert-danger').append('</div>'); 
        //clear all fields 
        $('#contactForm').trigger("reset"); 
       }, 
      }) 

Answer 1

成功コールバックは、焼成したとき200件のステータスを持つサーバーの応答

あなたが例

また

あなたはブール値を送ることができるため、バックエンドからヘッダー500（サーバーエラー）を送る必要があるerror機能にエラー（int型を言いたい場合成功応答で）フラグ：

{status: 1, message: "email does not exists"} 

or 

{status: 0, message: "email alredy taken"} 

はJavaScript：

$.ajax({ 
    url: "././mail/msend_form.php", 
    type: "POST", 
    data: { 
     fname: firstName, 
     gender: gender, 
     email: email 
    }, 
    dataType: "json", 
    cache: false, 
    success: function(response) { 
     if(response.status == 1){ 
      // ok 
     }else{ 
      // fail 
     } 
    } 
}); 

PHP

// check for existing email 

$email_exists = false; // or true 

$json = ['status' => 0, 'message' => 'Email exists']; // default 

if(!$email_exists){ 
    $json['status'] = 1; 
    $json['message'] = 'OK'; 
} 

// delete all outputs before header (echo, print_r...) 

header("Content-Type: application/json"); 
echo json_encode($json); 
die;