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插件，但它们都不能完全满足您的需求，因此我建议您自己编写。

工作流程应如下所示：

发起 XMLHttpRequest object
将目标设置为表格的action=属性（如果您可以从DOM获取此信息而无需再次手动输入，则为额外点数）
从表单中获取您要提交的数据（同样，使用DOM）
将包含您从表单获取的数据的POST请求发送到目标页面。
目标页面应返回某种响应，告诉客户提交顺利进行
客户端读取该响应并向用户显示成功消息。

Answer 3

这是对你有用的东西。

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

简而言之，您需要使用ajax将请求发布到您的表单的操作网址。你可以使用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;
?>

希望这有助于你

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

4 个答案: