頁面刷新點擊ajax

Question

我有一個小的評論系統，我已經修改並嘗試實施到網站中。它在'阿賈克斯'。當帶有HTML的jQuery嵌入到頁面中時，評論系統可以正常工作 - 即當用戶點擊提交按鈕時，代碼返回「false」，停止頁面刷新並提交數據。但是當我在我的網站中實現代碼並將其放置在單獨的.js文件中時，代碼出於某種原因無法正常工作。我的意思是 - onclick刷新後的頁面。爲什麼 ？代碼根本沒有改變 - 當它自己的時候，它的工作原理，但不是在index.php網站實施時。我嘗試將輸入類型更改爲「按鈕」，並從onclick調用函數 - 頁面不刷新，但也沒有插入輸入。我沒有意識到爲什麼會這樣。下面的代碼：

$(document).ready(function() { 
     $(".submit").click(function() { 
      var name = $("#name").val(); 
      var email = $("#email").val(); 
      var comment_area = $("#comment_area").val(); 
      var dataString = 'name=' + name + '&email=' + email + '&comment_area=' + comment_area; 
      var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
      var emailaddressVal = $("#email").val(); 
      if (name == '' || !emailReg.test(emailaddressVal) || comment == '') { 
       alert('Please enter valid data and type in message'); return false; 
      } 
      else { 
       $.ajax({ 
        type: "POST", 
        url: "comments.php", 
        data: dataString, 
        cache: false, 
        success: function (html) { 
         $("#com_list").append(html); 
         $("#com_list").fadeIn("slow"); 
         $("#flash").fadeOut('fast'); 

        } 
       }); 
      } return false; 
     }); 
    }); 
//END 
//COM LIST 

//HTML/PHP 
<div class="slider"> 
<form id="comment_form" name="comment_form" method="post" action="#"  
enctype="multipart/form-data"> 
<input type="text" id="name" name="name" maxlength="16"/>&nbsp;Name<br /><br/> 
<input type="text" id="email" name="email"/>&nbsp;Email&nbsp;(will not show)<br /><br/> 
<textarea id="comment_area" name="comment_area" maxlength="1000"></textarea><br /><br/> 
<input type="submit" class="submit" name="submit_comment" value="submit"/>&nbsp;& 
nbsp;comment or <a href="index.php" id="cancel" 
onmousedown="$('.slider').hide();$('#com_list').show();"><u>cancel</u></a> 
</form> 
</div> 

//comments.php

if($_POST) { 
$name=$_POST['name']; 
$email=$_POST['email']; 
$comment_area=$_POST['comment_area']; 
//$lowercase = strtolower($email); 
//$image = md5($lowercase); 
$insert = mysqli_query($connect,"INSERT INTO comments (name,email,comment,com_date) 
VALUES ('$name','$email','$comment_area',curdate())"); 

} 

////////////////

感謝您的任何建議..

Answer 1

aha！

有一個在您的js錯誤：

在我的控制檯我得到 「的評論沒有定義」

if(name=='' || !emailReg.test(emailaddressVal) || comment=='') 

和更早您有：

var comment_area = $("#comment_area").val(); //<-- 

改變這發表評論，至少它會過去。

編輯：一點背景。當firefox遇到錯誤時，有時會吞下它，並且在錯誤發生後停止運行任何javascript，因此返回false和/或阻止默認代碼不會觸發，所以它仍然會發布表單並刷新頁面。

Answer 2

保持你那該死的代碼乾淨，所以你能理解你做飯...... 這會爲你工作：

$(document).ready(function(){ 
    $("#comment_form").submit(function(e){ 
     e.preventDefault(); // stop refresh 

     var name = $("#name").val(); 
     var email = $("#email").val(); 
     var comment_area = $("#comment_area").val(); 
     var dataString = 'name='+ name + '&email=' + email + '&comment_area=' + comment_area+'&submit_comment=true'; 
     var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
     var emailaddressVal = $("#email").val(); 
     if(name=='' || !emailReg.test(emailaddressVal) || comment==''){ 
      alert('Please enter valid data and type in message'); 
     } else{ 
      $.ajax({ 
       type: "POST", 
       url: "comments.php", 
       data: dataString, 
       cache: false, 
       success: function(html){ 
        $("#com_list").append(html); 
        $("#com_list").fadeIn("slow"); 
        $("#flash").fadeOut('fast'); 
       } 
      }); 
     } 
    }); 
    $('#cancel').click(function(e){ 
     e.preventDefault(); 
     $('.slider').hide(); 
     $('#com_list').show(); 
    }); 
}); 

下面是一些更乾淨的代碼...

<div class="slider"> 
    <form id="comment_form" name="comment_form" method="post" action="#" enctype="multipart/form-data"> 
     <input type="text" id="name" name="name" maxlength="16"/>&nbsp;Name<br /><br/> 
     <input type="text" id="email" name="email"/>&nbsp;Email&nbsp;(will not show)<br /><br/> 
     <textarea id="comment_area" name="comment_area" maxlength="1000"></textarea><br /><br/> 
     <input type="submit" class="submit" name="submit_comment" value="submit"/>&nbsp;&nbsp;comment or <a href="index.php" id="cancel"><u>cancel</u></a> 
    </form> 
</div> 

下面是一些其他清潔和SECURE代碼

<?php 
if(isset($_POST['submit_comment'])){ 
    $name   = mysql_real_escape_string($_POST['name']); 
    $email   = mysql_real_escape_string($_POST['email']); 
    $comment_area = mysql_real_escape_string($_POST['comment_area']); 
    //$lowercase = strtolower($email); 
    //$image  = md5($lowercase); 
    $query = 'INSERT INTO comments (name,email,comment,com_date) '. 
       "VALUES ('$name','$email','$comment_area',CURDATE())"; 
    $insert = mysqli_query($connect, $query); 
} 
?> 

Answer 3

改變這一行：

$(".submit").click(function() { 

要這樣：

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

的submit事件被觸發的<form>元素上，而不是在提交按鈕。