問題與preventDefault。提交表單

Question

我創造了這個jQuery的AJAX腳本提交表單：

$(document).ready(function() { 

    // process the form 
    $('#reviewForm').submit(function(e) { 

     $("#reviewError").hide(); 
     $("#reviewSuccess").hide(); 

     var formData = { 
      'name'    : $('input[name=name]').val(), 
      'email'    : $('input[name=email]').val(), 
      'description' : $('input[name=description]').val(), 
      'one'   : $('input[name=price]').val(), 
      'two'   : $('input[name=location]').val(), 
      'three'    : $('input[name=staff]').val(), 
      'four'   : $('input[name=service]').val(), 
      'five'   : $('input[name=products]').val(), 
      'shopID'   : $('input[name=shopID]').val() 
     }; 

     // process the form 
     $.ajax({ 
      type  : 'POST', // define the type of HTTP verb we want to use (POST for our form) 
      url   : 'post/review.php', // the url where we want to POST 
      data  : formData, // our data object 
      dataType : 'json', // what type of data do we expect back from the server 
      encode  : true 
     }) 
      // using the done promise callback 
      .done(function(data) { 

       if (! data.success) { 

        $("#reviewError").show(); 

       } else { 

        // ALL GOOD! just show the success message! 
        $("#reviewSuccess").show(); 

       } 
      }) 

     // stop the form from submitting the normal way and refreshing the page 
     e.preventDefault(); 
    }); 

}); 

可悲的表單提交，雖然正常的方式，而不是雖然AJAX。我對這個問題可能會有所損失。我已經嘗試了回報錯誤等，但這根本不起作用。

Answer 1

我想你是失蹤e.preventDefault（）;在submit（）的開始處爲;並使用e。

$(document).ready(function(e) { 

    // process the form 
    $('#reviewForm').submit(function(e) { 
     e.preventDefault(); 
     $("#reviewError").hide(); 
     $("#reviewSuccess").hide(); 

     var formData = { 
      'name'    : $('input[name=name]').val(), 
      'email'    : $('input[name=email]').val(), 
      'description' : $('input[name=description]').val(), 
      'one'   : $('input[name=price]').val(), 
      'two'   : $('input[name=location]').val(), 
      'three'    : $('input[name=staff]').val(), 
      'four'   : $('input[name=service]').val(), 
      'five'   : $('input[name=products]').val(), 
      'shopID'   : $('input[name=shopID]').val() 
     }; 

     // process the form 
     $.ajax({ 
      type  : 'POST', // define the type of HTTP verb we want to use (POST for our form) 
      url   : 'post/review.php', // the url where we want to POST 
      data  : formData, // our data object 
      dataType : 'json', // what type of data do we expect back from the server 
      encode  : true 
     }) 
      // using the done promise callback 
      .done(function(data) { 

       if (! data.success) { 

        $("#reviewError").show(); 

       } else { 

        // ALL GOOD! just show the success message! 
        $("#reviewSuccess").show(); 

       } 
      }) 

    }); 

}); 

希望對您有所幫助。

Answer 2

$(document).ready(function() { 

    // process the form 
    $('#reviewForm').click(function(e) { 

     $("#reviewError").hide(); 
     $("#reviewSuccess").hide(); 

     var formData = { 
      'name'    : $('input[name=name]').val(), 
      'email'    : $('input[name=email]').val(), 
      'description' : $('input[name=description]').val(), 
      'one'   : $('input[name=price]').val(), 
      'two'   : $('input[name=location]').val(), 
      'three'    : $('input[name=staff]').val(), 
      'four'   : $('input[name=service]').val(), 
      'five'   : $('input[name=products]').val(), 
      'shopID'   : $('input[name=shopID]').val() 
     }; 

     // process the form 
     $.ajax({ 
      type  : 'POST', // define the type of HTTP verb we want to use (POST for our form) 
      url   : 'post/review.php', // the url where we want to POST 
      data  : formData, // our data object 
      dataType : 'json', // what type of data do we expect back from the server 
      encode  : true 
     }) 
      // using the done promise callback 
      .done(function(data) { 

       if (! data.success) { 

        $("#reviewError").show(); 

       } else { 

        // ALL GOOD! just show the success message! 
        $("#reviewSuccess").show(); 

       } 
      }) 

     // stop the form from submitting the normal way and refreshing the page 
     e.preventDefault(); 
    }); 

}); 

使用「點擊」事件而不是「提交」將工作definatly