页面刷新点击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-\.][email protected]([\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-\.][email protected]([\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>元素上，而不是在提交按钮。