后端error_msg没有发出警报。

Question

我正在使用jquery来执行.php文件，但我的主要问题是从后端抛出错误时，我使用了警报来显示该error_msg ..但是我故意提交了一个错误...它只是在移动进入操作中指定的页面...没有弹出错误警报...请帮我解决这个问题!!!

这里是DB_Function.php

<?php
class DB_Functions {
    private $db;

    // constructor for database connection
    function __construct() {
        try {
            $hostname = "localhost";
            $dbname = "miisky";
            $dbuser = "root";
            $dbpass = "";
            $this->db = new PDO("mysql:host=$hostname;dbname=$dbname", $dbuser, $dbpass);
        }
        catch(PDOException $e)
        {
            die('Error in database requirments:'    . $e->getMessage());
        }
    }

    /**
      * Storing new user
      * returns user details of user
      */
  public function storeUser($fname, $lname, $email, $password, $mobile) {  
    try {
        $hash = md5($password);
        $sql = "INSERT INTO users(fname, lname, email, password, mobile, created_at) VALUES ('$fname', '$lname', '$email', '$hash', '$mobile', NOW())";
        $dbh = $this->db->prepare($sql);

        if($dbh->execute()){
            // get user details
            $sql = "SELECT * FROM users WHERE email = '$email' LIMIT 1";
            $dbh = $this->db->prepare($sql);
            $result = $dbh->execute();
            $rows = $dbh->fetch();
            $n = count($rows);
            if($n){
                return $rows;
            }
        }
    }
    catch (Exception $e) {
        die('Error accessing database: ' . $e->getMessage());
    }
    return false;
}

/*to check if user is
 already registered*/
  public function isUserExisted($email) {
    try{
        $sql = "SELECT email FROM users WHERE email = '$email' LIMIT 1";
        $dbh = $this->db->prepare($sql);
        $result = $dbh->execute();
        if($dbh->fetch()){
            return true;
        }else{
            return false;
        }
    }catch (Exception $e) {
        die('Error accessing database: ' . $e->getMessage());
    }
}
/*to check if user
exist's by mobile number*/
public function isMobileNumberExisted($mobile){
try{
    $sql = "SELECT mobile FROM users WHERE mobile = '$mobile' LIMIT 1";
    $dbh = $this->db->prepare($sql);
    $result = $dbh->execute();
    if($dbh->fetch()){
    return true;
    }else{
    return false;
    }
}catch(Exception $e){
    die('Error accessing database: ' . $e->getMessage());
}
}
//DB_Functions.php under construction 
//more functions to be added
}
?>

在这里.php文件可以清楚地知道正在做什么.. !!

<?php
    require_once 'DB_Functions.php';
    $db = new DB_Functions();

    // json response array
    $response = array("error" => false);
    if (!empty($_POST['fname']) && !empty($_POST['lname']) && !empty($_POST['email']) && !empty($_POST['password']) && !empty($_POST['mobile'])){
        // receiving the post params
        $fname = trim($_POST['fname']);
        $lname = trim($_POST['lname']);
        $email = trim($_POST['email']);
        $password = $_POST['password'];
        $mobile = trim($_POST['mobile']);

        // validate your email address
        if(filter_var($email, FILTER_VALIDATE_EMAIL)) {
            //validate your password
            if(strlen($password) > 6){
            //validate your mobile
            if(strlen($mobile) == 12){
            //Check for valid email address
            if ($db->isUserExisted($email)) {
                // user already existed
                $response["error"] = true;
                $response["error_msg"] = "User already existed with " . $email;
                echo json_encode($response);
            } else {
                if($db->isMobileNumberExisted($mobile)) {
                    //user already existed
                    $response["error"] = true;
                    $response["error_msg"] = "user already existed with" . $mobile;
                    echo json_encode($response);
            } else {

                // create a new user
                $user = $db->storeUser($fname, $lname, $email, $password, $mobile);
                if ($user) {
                    // user stored successfully
                    $response["error"] = false;
                    $response["uid"] = $user["id"];
                    $response["user"]["fname"] = $user["fname"];
                    $response["user"]["lname"] = $user["lname"];
                    $response["user"]["email"] = $user["email"];
                    $response["user"]["created_at"] = $user["created_at"];
                    $response["user"]["updated_at"] = $user["updated_at"];
                    echo json_encode($response);
                } else {
                    // user failed to store
                    $response["error"] = true;
                    $response["error_msg"] = "Unknown error occurred in registration!";
                    echo json_encode($response);
                }
            }
         }
        } else {
            $response["error"] = true;
            $response["error_msg"] = "Mobile number is invalid!";
            echo json_encode($response);
        }

        } else {
            //min of 6-charecters
            $response["error"] = true;
            $response["error_msg"] = "password must be of atleast 6-characters!";
            echo json_encode($response);
        }

       } else {
            // invalid email address
            $response["error"] = true;
            $response["error_msg"] = "invalid email address";
            echo json_encode($response);
        }
    } else {
        $response["error"] = true;
        $response["error_msg"] = "Please fill all the required parameters!";
        echo json_encode($response);
    }
?>

这里是主文件.js

$(document).ready(function(){

    //execute's the function on click
    $("#submit").click(function(e){

        /*jquery to call the url requested 
        and parse the data in json*/
        $.ajax({
            url: "register.php",
            type: "POST",
            data: {
                fname: $("#fname").val(),
                lname: $("#lname").val(),
                email: $("#email").val(),
                password: $("#password").val(),
                mobile: $("#mobile").val()
            },
            dataType: "JSON",
            /*Give out the alert box
            to display the results*/ 
            success: function (json){
                if(json.error){
                    alert(json.error_msg);
                    e.preventDefault();
                }else{
                    alert("Registeration successful!",json.user.email);
                }
            },
            error: function(jqXHR, textStatus, errorThrown){
                alert(errorThrown);
                e.preventDefault();
            }
        });
    });

}); 

这里是相应的.html文件

<form method = "POST" name = "register" id = "register" class="m-t" role="form" action="login.html">

                    <div class="form-group">
                        <input type="text" name = "fname" id = "fname" class="form-control" placeholder="First Name" required="">
                    </div>
                    <div class="form-group">
                        <input type="text" name = "lname" id = "lname" class="form-control" placeholder="Last Name" required="">
                    </div>
                    <div class="form-group">
                        <input type="email" name = "email" id = "email" class="form-control" placeholder="Email" required="">
                    </div>
                    <div class="form-group">
                        <input type="password" name = "password" id = "password" class="form-control" placeholder="Password" required="">
                    </div>
                    <div class="form-group">
                        <input type="mobile" name = "mobile" id = "mobile" class="form-control" placeholder="Mobile No" required="">
                    </div>
                    <div  class="form-group" id="recaptcha_widget">
                                                        <div class="required">
                                                          <div class="g-recaptcha" data-sitekey="6Lc4vP4SAAAAABjh8AG"></div>
                                                       <!-- End Thumbnail-->
                                                      </div>
                                                      <?php include("js/captcha.php");?>
                    </div>
                    <div class="form-group">
                            <div cle the terms and policy </label></div>
                    </div>ass="checkbox i-checks"><label> <input type="checkbox"><i></i> Agre
                    <button type="submit" name = "submit" id = "submit" class="btn btn-primary block full-width m-b">Register</button>

                    <p class="text-muted text-center"><small>Already have an account?</small></p>
                    <a class="btn btn-sm btn-white btn-block" href="login.html">Login</a>
                <

/form>

Answer 1

您的表单提交在ajax操作之前执行操作，因此它会重新加载页面并使用表单提交而不是单击提交按钮

//execute's the function on click
    $("#register").on('submit',function(e){
       e.preventDefault(); // prevent page from reloading 

确定步骤，以确保在尝试使用ajax时一切正常

1st：使用表单提交并使用e.preventDefault(); 防止页面重新加载

//execute's the function on click
    $("#register").on('submit',function(e){
       e.preventDefault(); // prevent page from reloading
       alert('Form submited'); 
   });

如果警报弹出窗口和表单未重新加载页面，则使用ajax进行下一步

  //execute's the function on click
    $("#register").on('submit',function(e){
       e.preventDefault(); // prevent page from reloading
       $.ajax({
          url: "register.php",
          type: "POST",
          dataType: "JSON",
          data: {success : 'success'},
          success : function(data){
              alert(data);
          }
       });
   });

并在php （register.php）中

<?php 
   echo $_POST['success'];
?>

此代码应在“成功”警报框中发出警报..如果此步骤很好，那么现在您的ajax和php文件已成功连接，然后传递变量并执行其他操作

Answer 2

从评论：

所以只有在显示注册成功之后！ 我想提交表单并将其重定向到login.html

好了，解决方案非常简单，涉及在.ajax()添加async参数并将其设置为false 。 将async设置为false意味着要调用的语句必须先完成，然后才能调用函数中的下一条语句。 如果您设置async: true则该语句将开始执行，无论async语句是否已完成，都将调用下一条语句。

您的jQuery应该是这样的：

$(document).ready(function(){
    //execute's the function on click
    $("#submit").click(function(e){

        /*jquery to call the url requested 
        and parse the data in json*/
        $.ajax({
            url: "register.php",
            type: "POST",
            data: {
                fname: $("#fname").val(),
                lname: $("#lname").val(),
                email: $("#email").val(),
                password: $("#password").val(),
                mobile: $("#mobile").val()
            },
            async: false,
            dataType: "JSON",
            /*Give out the alert box
            to display the results*/ 
            success: function (json){
                if(json.error){
                    alert(json.error_msg);
                    e.preventDefault();
                }else{
                    alert("Registeration successful!",json.user.email);
                    ('#register').submit();
                }
            },
            error: function(jqXHR, textStatus, errorThrown){
                alert(errorThrown);
            }
        });
    });
}); 

因此，仅在注册成功后才提交表单，否则不会提交。

编辑：

首先确保<!DOCTYPE html>位于页面顶部，它代表html5，并且html5支持required属性。

现在谈到您的前端验证问题。 HTML5表单验证过程仅限于通过“提交”按钮提交表单的情况。 表单提交算法明确表示，当通过submit()方法submit()表单时，不会执行验证。 显然，这个想法是，如果您通过JavaScript提交表单，则应该进行验证。

但是，您可以使用checkValidity()方法针对HTML5属性定义的约束请求（静态）表单验证。

为简单起见，我删除了您的条款和条件复选框和Google ReCaptcha。 您可以稍后将它们合并到代码中。

因此，这是您的HTML代码段：

<form method = "POST" name = "register" id = "register" class="m-t" role="form" action="login.html">

    <div class="form-group">
        <input type="text" name = "fname" id = "fname" class="form-control" placeholder="First Name" required />
    </div>
    <div class="form-group">
        <input type="text" name = "lname" id = "lname" class="form-control" placeholder="Last Name" required />
    </div>
    <div class="form-group">
        <input type="email" name = "email" id = "email" class="form-control" placeholder="Email" required />
    </div>
    <div class="form-group">
        <input type="password" name = "password" id = "password" class="form-control" placeholder="Password" required />
    </div>
    <div class="form-group">
        <input type="mobile" name = "mobile" id = "mobile" class="form-control" placeholder="Mobile No" required />
    </div>

    <!--Your checkbox goes here-->
    <!--Your Google ReCaptcha-->

    <input type="submit" name = "submit" id = "submit" class="btn btn-primary block full-width m-b" value="Register" />

</form>

<p class="text-muted text-center"><small>Already have an account?</small></p>
<a class="btn btn-sm btn-white btn-block" href="login.html">Login</a>

而且您的jQuery会像这样：

$(document).ready(function(){

    //execute's the function on click
    $("#submit").click(function(e){

        var status = $('form')[0].checkValidity();
        if(status){
            /*jquery to call the url requested 
            and parse the data in json*/
            $.ajax({
                url: "register.php",
                type: "POST",
                data: {
                    fname: $("#fname").val(),
                    lname: $("#lname").val(),
                    email: $("#email").val(),
                    password: $("#password").val(),
                    mobile: $("#mobile").val()
                },
                async: false,
                dataType: "JSON",
                /*Give out the alert box
                to display the results*/ 
                success: function (json){
                    if(json.error){
                        alert(json.error_msg);
                        e.preventDefault();
                    }else{
                        alert("Registeration successful!",json.user.email);
                        $('#register').submit();
                    }
                },
                error: function(jqXHR, textStatus, errorThrown){
                    alert(errorThrown);
                }
            });
        }

    });

});