0

我正在向使用 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 包含中，上面没有显示
  • /user/process/checkemail.php - 查找 $_REQUEST['email']，并对数据库执行查询并返回一个字符串，说明“电子邮件地址存在”或“电子邮件地址可用”——我意识到这可能允许机器人收集电子邮件地址，但这只是我自己学习的示例代码。- 它不会是生产代码。
4

6 回答 6

2

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

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

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

由于您是 AJAX 新手，您可能想阅读这篇文章并熟悉您在此处使用的内容，这里有一个针对您需要的示例：

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

并检查 ajax、发布和获取函数 oj jQuery 网站的参考...

于 2012-09-15T11:01:42.740 回答
1

您的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;
}
于 2012-09-15T10:56:51.623 回答
0

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

于 2012-09-15T11:25:49.390 回答
-1 
    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;
        }
    });
于 2012-09-15T10:56:30.040 回答
-1

这不是最好的答案，因为它没有解释为什么这不起作用。我发现改用 jQuery 的 .load() 更容易。

您的代码将是：

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

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

于 2012-09-15T10:58:08.837 回答
-1

后

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

     success: function(data) {
         $('.result').html(data);
         alert('Load was performed.');
     }  
})
于 2012-09-15T10:58:59.520 回答