jquery ajax提交按钮

Question

我使用bootstrap模式获得了一个register表单，它将调用ajax post函数。

但是，它似乎并不执行我的$.post。另外，如何将php函数的返回值使用到ajax数据中？那么，如果我的createAccount返回true或其他值，我的ajax如何捕获它呢？

<form action="" id="registerForm" method="POST">
   .....
        <div class="d-grid gap-2"> 
            <button class="btn btn-primary" id="btnRegister" type="submit">Register!</button>

</form>

我的阿贾克斯。

$("#email").keyup(function(){
    var email = $("#email").val()
    {
        $('#emailResult').remove();
        $.post("createaccount.php",{
            checkEmail : email
        }, function(data){
            if(data=="true")
            {
                error=true;
                var str = '<div id="emailResult">';
                str +='<div class="alert alert-danger" role="alert">';
                str +='Email address already exists!';
                str+= '</div></div>';
                $('#result').append(str); 
            }
            else
            {
                error="false";
            }
        });
    }
});

    $("#btnRegister").click(function(){
    var email = $("#email").val();
    var password = $("password").val();
    $.post("createaccount.php",{
        email : email,
        password : password
    },function(data){
        alert(data);
    })
});

我的CreateAccount.php

<?php
include("db.php");
include("functions.php");

if(isset($_POST['checkEmail']))
{
    $email = $_POST['checkEmail'];
    {
        if(checkEmailExists($email))
        {
            echo "true";
        }
    }
}

if(isset($_POST['submit']))
{
    $email = $_POST['email'];
    $password = $_POST['password'];

    if(createAccount($email,$password))
    {
        return true;
    }
    else
    {
        return false;
    }

}
?>

我的函数.php

function createAccount($email,$password)
{
    global $conn;
    $hashPassword = password_hash($password,PASSWORD_DEFAULT);
    $sql = "INSERT into USERS (email,password) VALUES ('$email','$hashPassword')";
    if(mysqli_query($conn,$sql))
    {
        return true;
    }
    else
    {
        echo mysqli_error($conn);
        return false;
    }

}

Answer 1

尝试添加这个

$("#btnRegister").click(function(e){
   e.preventDefault();
   // Your code...

而不是

$("#btnRegister").click(function(){
   // Your code...

此代码将停止表单在单击按钮时提交。

顺便说一下，对于电子邮件检查，使用另一个true false值来阻止表单提交，直到邮件验证结果出现。

var error=true;
$("#email").keyup(function(){
    var email = $("#email").val()
    {
        $('#emailResult').remove();
        $.post("createaccount.php",{
            checkEmail : email
        }, function(data){
            if(data=="true")
            {
                error=true;
                var str = '<div id="emailResult">';
                str +='<div class="alert alert-danger" role="alert">';
                str +='Email address already exists!';
                str+= '</div></div>';
                $('#result').append(str); 
            }
            else
            {
                error=false;
            }
        });
    }
});

后来...

if(!error){
    $.post("createaccount.php",{
        email : email,
        password : password
    },function(data){
        alert(data);
    }) 
} 

Answer 2

为了在PHP代码中找到正确的位置，您需要在POST数组中有一个submit参数

if(isset($_POST['submit'])) {

但您的AJAX调用不传递该参数,因此添加它

$("#btnRegister").click(function(e){
    e.preventDefault();
    
    $.post("createaccount.php",{
                                email :     $("#email").val(),
                                password :  $("password").val(), 
                                submit: 1               // New line
                                },
        function(data){
            alert(data);
    })
});

您还可以使用e.preventDefault()；来阻止浏览器以正常方式提交表单以及执行AJAX调用