Question

我想要一个帐户注册页面，我在其中检查是否已使用电子邮件。如果是这样，PHP应该发送一条消息说明，否则应该有一个insert语句。我现在有一个html表单，通过javascript提交到PHP，这一切都有效，但我不能得到任何错误消息。如何在我的javascript中使用服务器（PHP）响应？

服务器：

<?php
    require 'config.php';
    require 'resources/password.php';
    $con = mysqli_connect($url,$username,$password,$database);

    // Check connection
    if (mysqli_connect_errno())
      {
      echo "Failed to connect to MySQL: " . mysqli_connect_error();
      }

    $name = $_POST['name'];
    $lastname = $_POST['lastname'];
    $email = $_POST['email'];
    $password  = $_POST['password'];
    $username  = $_POST['username'];
    $verifyemail = mysqli_real_escape_string($_POST['email']);

    $numberofrowsquery = "select * from `users` where `user_email`='$email'";
    $numberofrows=mysqli_query($con,"select * from `users` where `user_email`='$email'");

    //$exitst = mysqli_num_rows($numberofrows);
    if($numberofrows->num_rows) 
    {   
        //echo "exist";
        echo json_encode(array(
        'status' => 'exist',
        'message'=> 'exist message'
    ));

    }
    else
    {
        $hash = password_hash($password, PASSWORD_BCRYPT, array("cost" => 10));


        $query = "INSERT INTO users(user_email, username, user_voornaam,user_achternaam,user_password,user_hash) VALUES ('$email', '$username', '$name','$lastname','$password','$hash')";

        $succes = mysqli_query($con,$query);
            if($succes){
                //echo "success";
                echo json_encode(array(
                    'status' => 'success',
                    'message'=> 'success message'
                ));
            }
            else{
                //echo"failed";
                echo json_encode(array(
                    'status' => 'failed',
                    'message'=> 'failed message'
                ));
            }
    }
    mysqli_close($con);
    //echo "Uw account is succesvol geregistreerd."; 
    ?>

HTML / Javascript：

    <!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>ajax example</title>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>
        <div id="message"></div>
        <form id="myform" action="http://stopfoodwaste.stefspakman.com/app/signup.php">
            <input type="text" name="name" required/>
            <input type="text" name="lastname" required/>
            <input type="text" name="username" required/>
            <input type="text" name="email" required/>
            <input type="password" name="password" required/>
            <input type="submit" value="submit"/>
        </form>
        <div id="response"></div>

        <script>
            $(function() {
                $("#myform").on("submit", function(e) {
                    e.preventDefault();
                    $.ajax({
                        url: $(this).attr("action"),
                        type: 'POST',
                        data: $(this).serialize(),
                        beforeSend: function() {
                            $("#message").html("sending...");
                        },
                        success: function(data) {
                            if(data.status === "success"){
                                $("#message").hide();
                                $("#response").html(data);
                                alert("succes");
                                location.reload();
                            }
                            else if(data.status === "exist"){
                                $("#message").hide();
                                alert("Dit emailadress is reeds in gebruik, probeer in te loggen of gebruik een ander mailadres.");
                            }
                            else if(data.status === "failed"){
                                alert("Something Went wrong");
                            }
                        }
                    });
                });
            });
        </script>
    </body>
</html>

有人提出一些建议吗？

Answer 1

使用简单按钮替换提交按钮，并将按钮点击事件表单提交事件。由于您使用了提交按钮，因此它始终提交到操作php文件。像这样更新HTML代码：

 <!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>ajax example</title>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>
        <div id="message"></div>
        <form id="myform" action="http://stopfoodwaste.stefspakman.com/app/signup.php">
            <input type="text" name="name" required/>
            <input type="text" name="lastname" required/>
            <input type="text" name="username" required/>
            <input type="text" name="email" required/>
            <input type="password" name="password" required/>
            <input type="button" id="submitBtn" value="submit"/>
        </form>
        <div id="response"></div>

        <script>
            $(function() {
                $("#submitBtn").on("click", function(e) {
                    e.preventDefault();
                    $.ajax({
                        url: 'http://stopfoodwaste.stefspakman.com/app/signup.php',
                        type: 'POST',
                        data: $('#myform').serialize(),
                        beforeSend: function() {
                            $("#message").html("sending...");
                        },
                        success: function(data) {
                            if(data.status === "success"){
                                $("#message").hide();
                                $("#response").html(data);
                                alert("succes");
                                location.reload();
                            }
                            else if(data.status === "exist"){
                                $("#message").hide();
                                alert("Dit emailadress is reeds in gebruik, probeer in te loggen of gebruik een ander mailadres.");
                            }
                            else if(data.status === "failed"){
                                alert("Something Went wrong");
                            }
                        }
                    });
                });
            });
        </script>
    </body>
</html>

ajax形式发布成功消息

1 个答案: