完成表单提交操作，而无需重新加载页面

Question

我希望在提交表单数据后将其发送到我的php文件中，而无需加载php文件页面。 然后，发送的数据必须在处理后在Feed中消失。 谁能帮我？ 这是我的代码：

home.php：

<script>
 $(document).ready(function(){
    $('#content').load('feeds.php');
    }, 1000
 );
</script>

feeds.php：

   <?php
   //after connecting to my database and all
   $sql = mysql_query("SELECT * FROM `posts` ORDER BY `post_id` DESC");
   while($row = mysql_fetch_assoc($sql)) {
   echo '<div id="post">' . $row['post'] . '</div><br />';
   }
   ?>

这是提交帖子的表格

<form id="post" action="post.php" method="POST">
<textarea name="post" width=300 height=150></textarea>
<input type="submit" value="Post" id="submit">
</form>

post.php：

//after connecting to the database
$post = $_POST['post'];
if($post != '') {
 mysql_query("INSERT INTO `posts` (`post`) VALUE('$post')");
}
else {
 echo 'Form is empty!';
}

＃内容：

<div id="content"></div>

没有其他的。

请通过修改此代码来帮助我！ 谢谢你的回报！

Answer 1

最好的解决方案应该是JQuery和AJAX。 使用AJAX将数据发送到任何页面，然后根据响应可以淡出数据。

Answer 2

这是示例实现：

jQuery(function($){
    $("#post").submit(function(){
        $.ajax({
            url: $(this).attr("action"),
            data: $(this).serialize(),
            success: function(){
                alert("data sent");
            }
    });
    return false;
 });

Answer 3

从改变

<form id="post" action="post.php" method="POST">
<textarea name="post" width=300 height=150></textarea>
<input type="submit" value="Post" id="submit">
</form>

至

<form id="form1">
<textarea id="post" width=300 height=150></textarea>
<input type="button" value="Post" id="submit">
</form>

并将此脚本放在javascript区域：

$('#submit').click(function(event) {
    event.preventDefault(); /*  Stops default form submit on click */       
    var post = $('#post').val();
    $.ajax({                                                                    
        url: "post.php?",
        data: 'post=' + post,
        type: "POST",
        success: function(data){
        $('#content').empty();
        $('#content').load('feeds.php');
        }
    });
});

我没有测试它，但是应该是这样的。 希望能有所帮助。