JQuery Ajax - フルページ更新が発生する - なぜですか？

Question

jquery ajaxで連絡先フォームを送信するには、次のJQueryがあります。私が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

あなたは（リフレッシュしてページを提出する）デフォルトのアクションを実行することからブラウザを防ぐためにsubmitFormを呼び出した後falseを返却する必要があります。むしろこれよりところで

、：

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

私はこの使用します。ユーザーのプレスがフィールドに入力するか、そうでない場合はボタンをクリックせずにフォームを送信する場合は、

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

を、あなたのコードもそれを処理します。