javascript - 如何修改注册引导代码以检查电子邮件重复项？

Question

我正在使用常规 contact_me 表单的默认代码。它根据服务器响应带来成功或失败(根据我的理解)。此代码调用 msend_form.php，它负责与数据库的通信。它始终返回 true。我可以在那里检查数据库中现有的电子邮件。问题是我如何将其传递给 ajax 代码，以便它不仅会显示服务器响应的错误，还会显示现有电子邮件的错误。这是 msend_form.js 中的代码:

    $.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");
        },
    })

msend_form.php中的代码:

<?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>

谢谢

更新:

$.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 状态时触发成功回调

如果您想在 error 函数中显示错误，您需要从后端发送 header 500(服务器错误)

您还可以在成功响应中发送 bool(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;