Ajax查询未向服务器发送请求 - Ajax query not sending request to server

我正在使用jQuery向网页添加一些Ajax。请注意，我是Ajax的新手。该页面是一个简单的注册表单，我想在表单重定向到注册代码之前，检查用户提供的电子邮件地址是否已经注册，并告诉用户是否已经注册。

我一直在阅读这个问题及其答案，并尝试复制效果，但没有成功。

当我点击提交时，会调用javascript函数（我已经通过在checkEmail()函数中添加一些诊断代码来证明这一点），但是当我检查Apache服务器日志时，我可以看到除了对/user/process/chechemail.php的调用之外的所有请求。代码（下面）位于/user/目录中，我修改了url:路径，其中包含了相对路径和绝对路径的所有变体。Apache错误日志中没有记录任何内容。

当用户单击提交按钮时，他们会看到消息"出现问题！"。有人能发现哪里出了问题吗？

我的代码如下：

<script>
    function checkEmail()
    {
        $.ajax(
        {
            type: "POST",
            dataType: "html",
            data:
            {
                email: $('#email').val()
            },
            url: "/user/process/checkemail.php"
        })
        .done(function(response)
        {
            $('#message').html(response);
        })
        .fail(function()
        {
            $('#message').html("Something went wrong!");
            return false;
        });
    }
</script>
<div id="register-form">
    <form name="register" action="process/register.php" method="post" onsubmit="return checkEmail();">
        <div class="register-email-cell">
            <p class="text">Email Address</p>
        </div>
        <div class="register-email-cell">
            <input class="input" type="text" name="email">
        </div>
        <div class="register-email-cell">
            <input class="button" type="submit" value="Register">
        </div>
        <div>
            <p id="message" class="text"></p>
        </div>
    </form>
</div>

注：

对jQuery的<script>引用在PHP include中，上面没有显示
/user/process/checkemail.php-查找$_REQUEST['email']，并对数据库执行查询，并返回一个字符串，说明"电子邮件地址存在"或"电子邮件地址可用"-我意识到这可能允许机器人获取电子邮件地址，但这只是我自己学习的示例代码。-它不会是生产代码

首先，您需要绑定$ajax到将触发它的事件…它异步运行（在后台），并且它通常由事件触发，而不是直接触发——这会产生错误。I、另外，将对controller的调用更改为相对路径（如果您的视图文件在users中，则转到process/checkemail.php）。

其次，最好将js保存在单独的文件中。

此外，在将其与数据库进行比较之前，可以添加一些正则表达式来检查这是否是一封电子邮件。。。

由于你是AJAX的新手，你可能想阅读这篇文章，熟悉一下你在这里使用的东西，这里有一个你需要的例子：

http://metaphorical-lab.com/blog/?p=352

并检查ajax、post和get函数的参考ojQuery网站。。。

您的checkEmail()函数会立即返回undefined，这不会阻止表单提交。在AJAX请求有机会启动之前，您的页面就会被重新加载。AJAX请求是异步的——它们在后台运行，它们的回调在围绕对$.ajax()的实际调用的控制流之外执行，并且回调的返回值被丢弃。

完成您尝试执行的操作的一种方法是，如果检查成功并再次提交表单，则让done回调设置一个标志，如果未设置该标志，则让checkEmail()函数返回false：

var emailChecked = false;
function checkEmail()
{
    if (emailChecked) {
        return true;
    }
    $.ajax(
    {
        type: "POST",
        dataType: "html",
        data:
        {
            email: $('#email').val()
        },
        url: "/user/process/checkemail.php"
    })
    .done(function(response)
    {
        $('#message').html(response);
        emailChecked = true;
        $('form[name=register]').submit();
    })
    .fail(function()
    {
        $('#message').html("Something went wrong!");
    });
    return false;
}

如果您遇到问题，请尝试并回复
在checkemail.php中，您将通过定义$email=$_post['email']获得电子邮件；然后对其进行验证，并在结束时进行回波响应
响应将显示在成功部分

function checkEmail() {
var email = $('#email').val();
$.ajax({           
            type: "POST",  
            url:"/user/process/checkemail.php",  
            data:"email="+email,
            beforeSend: function()
            {                   
                //show some gif img
            },
            success: function(response)
            {               
                   $('#message').html(response);
            }, 
            complete: function()
            {
                //hide gif img
            },
            error: function(e)
            {  
                 alert('Error: ' + e);  
            }  
    }); //end Ajax
}//end function
<div id="register-form">
    <form name="register" action="" method="post" >
        <div class="register-email-cell">
            <p class="text">Email Address</p>
        </div>
    <div class="register-email-cell">
        <input class="input" type="text" name="email" id="email">
    </div>
    <div class="register-email-cell">
        <input class="button" type="submit" value="Register" onsubmit="return checkEmail();">
    </div>
    <div>
        <p id="message" class="text"></p>
    </div>
</form>

这不是最好的答案，因为它无法解释为什么不起作用。我发现只使用jQuery的.load（）更容易。

你的代码是：

 function checkEmail()
{
    email = $('#email').val();
    $('#message').load('/user/process/checkemail.php', {'email' : email});
}

这将直接将php脚本的响应加载到ID为div的元素中。｛'email'：email｝部分将向脚本传递一个$_POST['email']变量，该变量的值为email。

后

$.ajax(
{
    type: "POST",
    dataType: "html",
    data:
    {
        email: $('#email').val()
    },
    url: "/user/process/checkemail.php"
     success: function(data) {
         $('.result').html(data);
         alert('Load was performed.');
     }  
})

    you have to use ajax like that

      function checkEmail()
            {
 $.ajax({
         url: "/user/process/checkemail.php",
        data: { 'email': $('#email').val() },
        type: "POST",
        dataType: "html",
        success: function (result) {
           $('#message').html(response);
        },
        failed: function (d) {
            $('#message').html("Something went wrong!");
                    return false;
        }
    });