Question

我有一个小的评论系统，我已修改并尝试实施到网站。它在'ajax'中。当带有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

更改此行：

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

对此：

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

submit元素在<form>元素上触发，而不是在提交按钮上触发。

Answer 3

保持你的该死的代码干净，这样你就能明白你在做什么...... 这对你有用：

$(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>

以下是其他一些干净且安全代码

<?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);
}
?>

使用ajax提交点击页面刷新

3 个答案: