首页 文章

使用ajax提交点击页面刷新

提问于
浏览 次
0

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


<input type="text" id="email" name="email"/>&nbsp;Email&nbsp;(will not show)


<textarea id="comment_area" name="comment_area" maxlength="1000"></textarea>


<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())"); 

}

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

谢谢你的任何建议..

php jquery html xhtml

3 回答

  • 3

    啊哈！

    你的js有一个错误：

    在我的控制台中我得到“评论没有定义”

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

    你早先有：

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

    改变这个评论，它至少会过去 .

    编辑：一点背景 . 当firefox遇到错误时，有时它会吞下它，并且只是在该错误之后停止运行任何javascript，所以你的返回false和/或防止默认代码不会触发，所以它仍然会发布表单并刷新页面 .

    回复于
  • 1

    改变这一行：

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

    对此：

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

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

    回复于
  • 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

    
        <input type="text" id="email" name="email"/>&nbsp;Email&nbsp;(will not show)

    
        <textarea id="comment_area" name="comment_area" maxlength="1000"></textarea>

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

相关问题