Question

我有以下JQuery提交与jquery ajax的联系表单。这是我第一次尝试使用ajax而我似乎无法使其工作。

当我提交表单时，我会获得整页刷新，然后进入表单操作页面，该页面是处理表单的php文件。我无法弄清楚为什么。你能帮忙吗？

php文件正确处理信息，因为他在最后得到的消息是正确的 - 它只是在php页面上给我。

谢谢！

$(document).ready(function() {

    ...

    // -----------------------------------------------
    // EMAIL FORM SUBMIT CLICK
    // -----------------------------------------------
    $("#contact_form #btnSubmit").click(function() {

        // assign form elements to variables
        var txbName = $("input[name=txbName]");
        var txbEmail = $("input[name=txbEmail]");
        var txbMessage = $("textarea[name=txbMessage]");
        var txbRecaptcha = $("input[id=recaptcha_response_field]");

        // assign form element values
        var txbNameVal = txbName.val();
        var txbEmailVal = txbEmail.val();
        var txbMessageVal = txbMessage.val();
        var txbRecaptchaVal = txbRecaptcha.val();

        // validate NAME field
        if($.trim(txbNameVal) == "" || $.trim(txbNameVal.length) < 2){
            $(txbName).focus().fadeOut("slow").fadeIn("slow").fadeOut("slow").fadeIn("slow");
            response('- Name is required!','show');
            return false;
        } else {
            response('','hide');
        }

        // validate EMAIL field
        if($.trim(txbEmailVal) == "" || $.trim(txbEmailVal.length) < 6){
            $(txbEmail).focus().fadeOut("slow").fadeIn("slow").fadeOut("slow").fadeIn("slow");
            response('- Email is required!','show');
            return false;
        } else {
            response('','hide');
        }

        // validate EMAIL format
        if(!txbEmailVal.match(/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/)){
            $(txbEmail).focus().fadeOut("slow").fadeIn("slow").fadeOut("slow").fadeIn("slow");
            response('- Email format is incorrect!','show');
            return false;
        } else {
            response('','hide');
        }

        // validate MESSAGE field
        if($.trim(txbMessageVal) == "" || $.trim(txbMessageVal.length) < 10){
            response('- Message is required!','show');
            $(txbMessage).focus().fadeOut("slow").fadeIn("slow").fadeOut("slow").fadeIn("slow");
            return false;
        } else {
            response('','hide');
        }

        // validate reCAPTCHA field
        if($.trim(txbRecaptchaVal) == ""){
            response('- Recaptcha is required!','show');
            $(txbRecaptcha).focus().fadeOut("slow").fadeIn("slow").fadeOut("slow").fadeIn("slow");
            return false;
        } else {
            response('','hide');
        }

        /*
        if we've passed all of the above validation,
        then show the ajax loading icon, serialize
        the form data and call the ajax submit function
        */
        $('.loading').show();
        var formData = $('form').serialize();
        submitForm(formData);
    });
});

// -----------------------------------------------
// AJAX FORM SUBMIT - OUTSIDE OF DOCUMENT READY!
// -----------------------------------------------
function submitForm(formData){
    $.ajax({    
        type: 'POST',
        url: 'contact.php',     
        data: formData,
        dataType: 'json',
        cache: false,
        timeout: 7000,
        success: function(data) {           
            // test
            alert(data.msg);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            // test
            alert(errorThrown + textStatus);            
        },              
        complete: function(XMLHttpRequest, status) {            
            $('form')[0].reset();
        }
    }); 
}

Answer 1

您需要在致电false后返回submitForm以阻止浏览器执行默认操作（通过刷新提交页面）。

顺便说一句，而不是：

$("#contact_form #btnSubmit").click(function() {
    // ...
});

我会用这个：

$("#contact_form").submit(function() {
    // ...
});

然后，如果用户在某个字段中按Enter键或以其他方式提交表单而不单击该按钮，那么您的代码也会处理它。

JQuery Ajax - 全页刷新Occures - 为什么？

1 个答案: