无需重新加载页面即可完成表单提交操作答案

【问题标题】：Complete form submit action without reloading the page无需重新加载页面即可完成表单提交操作
【发布时间】：2014-10-16 23:56:08
【问题描述】：

我希望表单数据在提交后发送到我的 php 文件，而不加载 php 文件页面。然后发送的数据必须在处理后淡入提要。谁能帮我？这是我的编码：

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!';
}

#content:

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

没有别的了。

请帮助我修改此代码！作为回报！

【问题讨论】：

查看本页右侧。你可以看到很多链接描述你需要什么。 stackoverflow.com/questions/11694653/…
确定它确实使用了该属性@Fred-ii-
@AkashRaj 重新加载；它在 5 分钟前消失了；）我的错误。我在想别的事。

标签： php jquery html ajax forms

【解决方案1】：

改成

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

@Htmlin.com 发布了一个 sn-p。尝试围绕它构建您的解决方案。

【解决方案3】：

这里是示例实现：

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

【讨论】：