评论表单,ajax没有响应

时间:2015-08-18 13:30:52

标签: jquery ajax

我目前正在使用评论系统编写博客。我想使用AJAX,因此在提交评论后不需要刷新页面。 但是,AJAX流程不会将表单信息发送到我的php脚本。在我的Javascript / Ajax代码中,我使用alert-function编写了几个“断点”来查看正在执行的AJAX脚本中的代码。所有的警报功能都可以正常工作,因此希望意味着正在执行AJAX脚本。但是没有信息发送到我的数据库。

请您查看下面的代码并帮我弄清楚我做错了什么?

我的HTML表单:

<form method="post" action="" id="commentform">
 <ul>
  <li> <label>Your name:</label>
  <input type="text" name="name" id="name" required> 
  </li>
  <li> <label>Comment:</label><br id="commentformbr">
  <textarea name="comment" id="comment" rows="3" wrap="hard" required></textarea>
  </li>
 </ul>
 <div id="buttondiv">
  <input type="submit" value="Post comment" id="submit">
  <input type="reset" value="Reset form">
 </div>
</form>

我的AJAX脚本(在HTML文档的head-tag中):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
    $('#commentform').on('submit',function(e){
        e.preventDefault();
        var name = $("#name").val();
        var comment = $("#comment").val();
        alert("After preventDefault");
        $.ajax({
            url: "commentsprocess.php",
            type: "POST",
            cache: false,
            data: {
                'user_name': name,
                'user_comm': comment
            },
            success: function(response){
                alert("Start of succces-function");
                $('#all_comments').innerHTML=response + $('#all_comments').innerHTML;
                $('form').reset();
                alert("End of succces-function");
            },
            error: function(e) {
                alert(e);
            }
        });
    });
});
    </script>

最后,我的php脚本应该在名为'blogcomments'的表中插入评论员的注释和名称。 PHP脚本还返回最新的评论:

<?php
include '../phpprocesses/phpfunctions.php';
require_once '../setupsql.php';

$connection = new mysqli($db_hostname,$db_username,$db_password,$db_database);
if($connection->connect_error) die($connection->connect_error);

if(isset($_POST['user_comm']) && isset($_POST['user_name'])) {
//get_post-function from phpfunction.php is used to sanitize the posted strings.
    $comment = get_post($connection,'user_comm');
    $name = get_post($connection,'user_name');

    //Inserts the comment in the 'blogcomments' table
    $query = "INSERT INTO blogcomments VALUES" . "(NULL,'$name','$comment',CURRENT_TIMESTAMP)";
    $result = $connection->query($query);
    if(!$result) die($connection->error);

    //Returns the latest comment to the comment-page
    $id = $connection->insert_id($result);
    $query = "SELECT * FROM blogcomments WHERE name='$name' and comment='$comment' and id='$id'";
    $result = $connection->query($query);
    if(!$result) die($connection->error);

    $result->data_seek(0);
    $row = $result->fetch_array(MYSQLI_ASSOC);
    $name = $row['name'];
    $comment = $row['comment'];
    $time = $row['timestamp'];

    echo <<<_END
        <div class="commentdiv">
            <h4>Posted by: <?php echo $name;?></h4>
            <h5><?php echo $time;?></h5>
            <p><?php echo $comment;?></p>
        </div>
_END;
}
?>

1 个答案:

答案 0 :(得分:0)

所以,在得到你的帮助并尝试自己调试之后,我终于设法在我的博客上发布我的评论页面。您可以看到对以下更改的重写和注释。 我的HTML表单。这里没有比删除&#34;动作&#34; -attribute:

更改
<form method="post" id="commentform">
<ul>
    <li> <label>Your name:</label>
     <input type="text" name="name" id="name" required>
</li>
 <li> <label>Comment:</label>
     <br id="commentformbr">
     <textarea name="comment" id="comment" rows="3" wrap="hard" required></textarea>
</li>
  </ul>
<div id="buttondiv">
  <input type="submit" value="Post comment" id="submit">
  <input type="reset" value="Reset form">
</div>
</form>

我的AJAX脚本。所做的更改是:

1)警报功能已被删除,并且commentsprocess.php的网址也已更改(次要更改)。

2)而不是使用&#34; $(&#39; ...&#39;)。innerHTM L =响应+ $(&#39; ...&#39;)。innerHTML&#34 ;要将最新的评论放在评论部分中,我已将其替换为JavaScript函数prepend()。这会将来自commentsprocess.php脚本的响应放在指定的目标中。

3)我没有使用$(&#39;形式&#39;)。reset(),这显然不起作用,我已经使用$(&#39;)重置了我的评论字段中的两个输入字段。 #name&#39;)。val(&#34;&#34;)代替。

$(document).ready(function(){
    $('#commentform').on('submit',function(e){
        e.preventDefault();
        var name = $("#name").val();
        var comment = $("#comment").val();
        $.ajax({
            url: "../phpprocesses/commentsprocess.php",
            type: "POST",
            cache: false,
            data: {
                'user_name': name,
                'user_comm': comment
            },
            success: function(response){
                $('#all_comments').prepend(response);
                $('#comment').val("");
                $('#name').val("");
            },
            error: function(e) {
                alert(e);
            }
        });
    });
});

最后但并非最不重要的是,我的commentsprocess.php脚本处理AJAX调用。这个文件实际上一直是主要问题。已经进行的改变是:

1)get_post() - 函数来自&#39; phpfunctions.php&#39;无法被召唤。我用htmlentities()替换它来清理$ _POST字符串(我应该从MySQL注入中清除它)。

2)我只是把它写成普通的HTML而不是回显输出。

<?php
require_once '../setupsql.php';

$connection = new mysqli($db_hostname,$db_username,$db_password,$db_database);
if($connection->connect_error) die($connection->connect_error);

if(isset($_POST['user_comm']) && isset($_POST['user_name'])) {
    //get_post-function from phpfunction.php is used to sanitize the posted strings.
    $comment = htmlentities($_POST['user_comm']);
    $name = htmlentities($_POST['user_name']);

    //Inserts the comment in the 'blogcomments' table
    $query = "INSERT INTO blogcomments VALUES" . "(NULL,'$name','$comment',CURRENT_TIMESTAMP)";
    $result = $connection->query($query);
    if(!$result) die($connection->error);

    //Returns the latest comment to the comment-page
    $id = $connection->insert_id;
    $query = "SELECT * FROM blogcomments WHERE name='$name' and comment='$comment' and id='$id'";
    $result = $connection->query($query);
    if(!$result) die($connection->error);

    $result->data_seek(0);
    $row = $result->fetch_array(MYSQLI_NUM);
    $name = $row[1];
    $comment = $row[2];
    $time = $row[3];
?>
<div class="commentdiv">
    <p><?php echo $comment;?></p>
    <a href="#" class="deletecomment">Delete comment</a>
    <span class="commname"><?php echo $name;?></span>, <span class="commtimestamp"><?php echo $time;?></span>
</div>
<?php
$connection->close();
}
?>