后端error_msg没有发出警报..！

Question

我正在使用jquery来执行一个.php文件但是我的主要问题是当从后端抛出错误时我使用了一个警告来显示error_msg ..但是我有意提交错误...它只是移动到行动中指定的页面...没有错误警报加速... PLZ帮助我摆脱这个。!!请原谅我错了

这里出现了 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

时，everthing工作正常

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

此解决方案非常简单，并且需要在async中向false添加.ajax()参数并将其设置为async。将false设置为async: true意味着您调用的语句必须在函数中的下一个语句被调用之前完成。如果设置$(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); } }); }); }); ，则该语句将开始执行，并且无论异步语句是否已完成，都将调用下一个语句。

你的jQuery应该是这样的：

<!DOCTYPE html>

因此，只有在注册成功时才会提交表格，否则不会。

<强>编辑：

首先请确保页面顶部有required，代表html5，html5支持submit()属性。

现在进行前端验证。 HTML5表单验证过程仅限于通过提交按钮提交表单的情况。 Form submission algorithm明确表示在通过checkValidity()方法提交表单时不会执行验证。显然，我们的想法是，如果您通过JavaScript提交表单，则应该进行验证。

但是，您可以使用<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> 方法针对HTML5属性定义的约束请求（静态）表单验证。

为了简化起见，我删除了条款和条件复选框和Google ReCaptcha。您可以稍后在代码中加入这些内容。

所以，这是您的 HTML 代码段：

$(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);
                }
            });
        }

    });

}); 

你的 jQuery 就像这样：

http://localhost/xyz.com/post-add.php