Обновление страницы вместо Ajax Загрузка без

Question

В форме submit Я хочу загрузить div с обновленным списком таблицы mysql. Я отправляю переменные формы в php и отправляю их в таблицу mysql. на той же странице отображаются полные данные таблицы. Я хочу загрузить данные в тег div, что и форма. Таким образом, кажется, что информация загружается над формой.

Мои Javascript

$("#formSubmit").submit(function(){ 

    var name = $("input#name").val(); 
    var comment = $("input#comment").val(); 
    var filmnumber = $("input#hidden").val(); 

    var dataString = 'name='+ name + '&comment=' + comment + '&filmnumber=' + filmnumber; 

    $.ajax({ 
     type: "POST", 
     url: "comment.php", 
     data: dataString, 
     success: function() { 
      $('#2').load('comment.php'); 
     } 
    }); 

Моя форма -

<div id="2">          
    <p>Add a Comment</p> 
    <form id="formSubmit" method="POST"> 
     <div> 
      <input type="hidden" name="hidden" id="hidden" value="2"> 
      <label for="name">Your Name</label> 
      <input type="text" name="name" id="name" /> 

      <label for="body">Comment Body</label> 
      <textarea name="comment" id="comment" cols="20" rows="5"></textarea> 

      <input type="submit" id="comment" class="button" value="Submit" /> 
    </form> 
    </div> 

Все это делает освежает страницу и не загружая информацию для Div 2: S

спасибо за вашу помощь

Answer 1

Вам необходимо, чтобы форма не перенаправляла страницу с помощьюметод на объекте события:

$("#formSubmit").submit(function(e){ // add the event object as an argument to your function 
    e.preventDefault(); // right here 

    var name = $("input#name").val(); 
    var comment = $("input#comment").val(); 
    var filmnumber = $("input#hidden").val(); 

    var dataString = 'name='+ name + '&comment=' + comment + '&filmnumber=' + filmnumber; 

    $.ajax({ 
     type: "POST", 
     url: "comment.php", 
     data: dataString, 
     success: function() { 
     $('#2').load('comment.php'); 
     } 
    }); 
}); 

Answer 2

добавить возврат ложного конца, чтобы остановить форму от представления. или если вы хотите быть более элегантным, используйте preventDefault(); метод. лично для чего-то столь же простого, как это, хотя я просто придерживаюсь return false;

$("#formSubmit").submit(function(e){ // add the event object as an argument to your function 


var name = $("input#name").val(); 
var comment = $("input#comment").val(); 
var filmnumber = $("input#hidden").val(); 

var dataString = 'name='+ name + '&comment=' + comment + '&filmnumber=' + filmnumber; 

$.ajax({ 
    type: "POST", 
    url: "comment.php", 
    data: dataString, 
    success: function() { 
    $('#2').load('comment.php'); 
    } 
}); 
return false;//right here 

});