Question

我有一个提交AJAX的表单。

此表格正常，但我的印象是功能不正确。

jQuery(document).ready(function(){
    var myForm = $("#ajax_form"), email = $("#email"), emailInfo = $("#emailInfo"), ck1 = $("#ck1"), ck2 = $("#ck2"), ck3 = $("#ck3");
    jQuery('#ajax_form').submit(function(){
        var dados = jQuery( this ).serialize();
        jQuery.ajax({
            type: "POST",
            url: "check.php", // Checking data
            data: dados,
            beforeSend: function(){
                emailInfo.html("<font color='blue'>Checking..</font>");
                if(dados == "email=") // >>> This field, how to check if the field is blank?
                {
                    email.focus();
                    emailInfo.html("<font color='red'>Required.</font>");
                    return false;
                }
            },
            success: function(data){
            if(data == "invalid")
            {
                emailInfo.html("<font color='red'>Invalid.</font>");
            }
            else if(data != "0")
            {
                email.val(data); // This field, how to display the data sent in the email field? not the return of PHP,
                ck1.css("display", "none");
                ck2.css("display", "inline");
            }
            else
            {
                ck1.css("display", "none");
                ck2.css("display", "none");
                ck3.css("display", "inline");
            }
        }
        });

        return false;
    });
});

我认为这有很多错误的代码，例如：

if(dados == "email=") // >>> This field, how to check if the field is blank?

和＆gt;＆gt;

email.val(data); // This field, how to display the data sent in the email field? not the return of PHP,

我尝试更新但没有返回任何结果

测试代码

                    //if (email.val() == "")
                //{
                    //email.focus();
                    alert(email.val()); // op1
                    alert(dados); // op2
                    alert($.trim($('email').val())); // op3
                    emailInfo.html("<font color='red'>Required.</font>");
                    return false;
                //}

如果插入电子邮件，则返回的唯一选项是op2 email =teste@teste.com

Answer 1

我认为您的代码在提交表单之前尝试通过ajax验证电子邮件。如果是这样的话，这个代码对我来说似乎没有问题。

提交调用结束时

return false可能无法在Firefox上运行。使用e.preventDefault();。查看this帖子。如果您在Chrome上尝试此代码，则可能会失败，因为您在任何地方都没有return true。

你的第二个代码块没问题。 email.val(data);等于$("#email").val(data);。我想您正在尝试将电子邮件输入值设置为结果。

if(dados == "email=")可以更改为if (email.val() != '')。所以你也不需要爸爸。

您不能使用myForm变量。它应该被删除。

如果验证服务器端的电子邮件不是必须考虑在客户端进行验证。

Answer 2

返回的data值将从您的PHP文件中回显。验证数据有两种方法：

在发送表单之前在JS的前端进行。
在单独的文件中使用您的PHP代码。
```
email.val(data); // This field, how to display the data 
                    sent in the email  field? not the return of PHP
```
我猜你要确保在用户发送无效请求时不会删除该值（因此必须再次输入值）。

您可以做的是存储用户在表单提交时输入的值，但在发送AJAX请求之前：var emailVal = email.val();

jQuery(document).ready(function(){
var myForm = $("#ajax_form"), email = $("#email"), emailInfo = $("#emailInfo"), ck1 = $("#ck1"), ck2 = $("#ck2"), ck3 = $("#ck3");
jQuery('#ajax_form').submit(function(){
    var dados = jQuery( this ).serialize();

    var emailVal = email.val(); // Assign the entered input to an emailVal variable

    jQuery.ajax({
        type: "POST",
        url: "check.php", // Checking data
        data: dados,
        beforeSend: function(){
            emailInfo.html("<font color='blue'>Checking..</font>");
            if(dados == "email=") // >>> This field, how to check if the field is blank?
            {
                email.focus();
                emailInfo.html("<font color='red'>Required.</font>");
                return false;
            }
        },
        success: function(data){
        if(data == "invalid")
        {
            emailInfo.html("<font color='red'>Invalid.</font>");
        }
        else if(data != "0")
        {

            email.val(emailVal); // Store the entered value back into the email input

            ck1.css("display", "none");
            ck2.css("display", "inline");
        }
        else
        {
            ck1.css("display", "none");
            ck2.css("display", "none");
            ck3.css("display", "inline");
        }
    }
    });

    return false;
  });
});

另一个注意事项

我还要指出：if(data == "invalid")

我发现PHP可以在data内发回错误消息以及您要求返回的内容。如果您的PHP代码中有任何错误，则永远不会出现这种错误，因为invalid永远不会是返回的data值中唯一的字符串。为了保护自己，我会做两件事：

返回HTTP错误并在AJAX函数的error回调中进行错误处理：https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
返回一个唯一的单词并在返回的数据字符串中搜索该单词：

<强> PHP

if(!validEmailCheck($email)){
   echo('invalidRAWR');
}

<强> JS

if(data.indexOf('invalidRAWR') != -1)  // Built in PHP errors will never return 'invalidRAWR'

jQuery Ajax POST和返回数据

2 个答案: