Question

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

我一直在阅读this question及其答案，并尝试重现效果，但没有成功。

当我点击提交时，会调用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']，并对数据库执行查询并返回一个字符串，指出“存在电子邮件地址”或“可用电子邮件地址” - 我意识到这可能会让机器人收集电子邮件地址，但这只是用于我自己学习的示例代码。 - 它不会是生产代码。

Answer 1

首先，你需要将。$ ajax绑定到将触发它的事件...它以异步方式（在后台运行）运行，它用于由事件触发，而不是直接触发 - 这会产生你的错误。我也会将控制器的调用更改为相对路径（如果您的视图文件在用户中，则转到'process / checkemail.php'）。就像你在表单中所做的一样。

第二 - 最好将js保存在单独的文件中。

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

由于您不熟悉AJAX，您可能希望阅读本文并熟悉您在此处使用的内容，并为您提供了一个示例：

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

并检查ajax，post和get函数的引用oj jQuery website ...

Answer 2

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

实现您要做的事情的一种方法是，如果检查成功，则done回调设置标志并再次提交表单，并使checkEmail()函数返回{ {1}}如果未设置标志：

false

Answer 3

如果您遇到问题，请尝试此操作并回复在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>

Answer 4

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

Answer 5

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

您的代码将是：

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

这会将php脚本的响应直接加载到ID为div的元素中。 {'email'：email}部分会将$ _POST ['email']变量传递给脚本，其值为email。

Answer 6

之后

$.ajax(
{
    type: "POST",
    dataType: "html",
    data:
    {
        email: $('#email').val()
    },
    url: "/user/process/checkemail.php"

     success: function(data) {
         $('.result').html(data);
         alert('Load was performed.');
     }  
})

Ajax查询不向服务器发送请求

6 个答案: