用javascript提交表单数据（不重新加载页面）

Question

我有一个挂有状态的墙/社交系统（非常类似于facebook），但是我希望能够在不重新加载页面的情况下喜欢，不喜欢和评论状态，请使用下面的表格来完成此操作？

if(empty($_GET['action'])){

        postupdate();
        if(isset($_POST['sComment'])){
        $dbc = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
        $comment = mysqli_real_escape_string($dbc, trim($_POST['comment']));
        $sid = mysqli_real_escape_string($dbc, trim($_POST['sID']));
        $dbc = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
        $query = "INSERT INTO comments (`user`, `post`, `time`, `content`) VALUES ('".$_SESSION['user_id']."', '$sid', NOW(), '$comment')";
        $data = mysqli_query($dbc, $query);
        }
        $dbc = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
        $query = "SELECT posts.*, user.*  FROM posts JOIN user ON user.user_id = posts.user_id JOIN friends ON friends.user = ".$userinfo['id']." AND friends.with = posts.user_id ORDER BY posts.post_id DESC";
        $data = mysqli_query($dbc, $query);
        while($row = mysqli_fetch_array($data)){
            echo'<div class="shadowbar">
                    <div class="postedBy"><b> Posted by <a href="index.php?action=user&u='.$row['user_id'].'" class="btn-link">'. $row['firstname'] .' '. $row['lastname'] .'</a> On '. date('M j Y g:i A', strtotime($row['postdate'])) .'</b></div>';
                    $parsed = $parser->parse($row['post']);
                echo '<pre>'.$parsed.'</pre>
                <hr>
                <form method="post" action="index.php" class="commentForm">
                    <fieldset>
                        <div class="input-group">
                            <textarea cols="150" rows="1" style="resize: none;" placeholder="Comment..." class="form-control" type="text" id="commentBox" name="comment"></textarea>
                        </div>
                        <input type="hidden" value="'.$row['post_id'].'" name="sID">
                    </fieldset>
                    <input class="Link LButton" type="submit" value="Add comment" name="sComment" />
                </form>             
            </div>';
            }
            echo '</div>';
            }

可以更改表格以适合代码。 我假设我需要使用JavaScript。

Answer 1

这是一些入门的代码。

首先，添加一个ID或类以轻松识别表单：

<form method="post" action="index.php?action=comment" class='commentForm'>

既然您标记了jQuery，我将使用它：

$(document).on('submit', '.commentForm', function(e) {
    e.preventDefault(); // Prevents the default page reload after form submission

    $.ajax({
        type: $(this).prop('method'),
        url: $(this).prop('action'),
        data: $(this).serialize()
    }).done(function() {
        // Do something after it submits
        alert('Thanks for the comment!');
    }).fail(function() {
        // There was an error
        alert('An error occurred');
    });
});

您可以在jQuery文档中阅读有关jQuery.ajax更多信息。

Answer 2

是的，您需要使用JavaScript将POST请求发送到服务器。 有几个jQuery插件，但是没有一个完全适合您的需求，因此我建议您编写自己的插件。

工作流程应如下所示：

1. 启动XMLHttpRequest对象
2. 将目标设置为等于表单的action=属性（如果可以从DOM获取此信息而无需再次手动键入，则要加分）
3. 再次从表单中获取要提交的数据（再次使用DOM）
4. 将包含您从表单中获得的数据的POST请求发送到目标页面。
5. 目标页面应返回某种响应，以告知客户提交顺利
6. 客户端读取该响应并向用户显示成功消息。

Answer 3

这对您应该有用。

http://www.9lessons.info/2009/11/facebook-style-application-with-jquery.html

简而言之，您需要使用ajax将请求发布到表单的操作URL。 您可以使用jQuery。 http://api.jquery.com/jquery.ajax/

Answer 4

使用ajax发送和接收数据。 使用下面的代码

    <form method="post" action="index.php?action=comment" id="Form">
                <fieldset>
                    <legend>Status Update</legend>
                    <div class="input-group">
                        <textarea cols="150" rows="5" style="resize: none;" placeholder="Comment..." class="form-control" type="text" id="text" name="comment"></textarea>
                    </div>
                    <input type="hidden" id="hidden" value="$statusID" name="sID">
                </fieldset>
                <input class="Link LButton" type="submit" value="Add comment" name="submit" />
            </form><div class="container"></div>
        <script>
        $(document).ready(function(){
        $('#Form').submit(function(e) { 
         e.preventDefault(); // This will prevent the form to be submitted
        var hidden=$("#hidden").val();
        var comment=$("#text").val();
       $.post(
            "index.php", {
            comment: comment,
   sID:hidden
        },
         function (data) {
            $('#check').html(data);

        });
            });
        </script>

您的PHP文件应如下所示

<?php
$comment=$_REQUEST['comment'];
$sID=$_REQUEST['sID'];
echo $comment."<Br>".$sID;
?>

希望这对您有帮助