PHP AJAX Post post和Post after Post

时间:2014-04-04 09:39:21

标签: php jquery html ajax post

我想知道 - 我如何制作类似Facebook或Twitter的帖子系统 - 当我在postarea中输入文本并单击提交时,它会将数据插入数据库并立即显示我刚刚输入的内容? 我有这个JS代码

$(function()
{
    $(".inpPostBtn").click(function()
    {
        var textcontent = $("#postTextarea").val();
        var dataString = 'postTextarea='+ textcontent;
        if(textcontent=='')
        {
            alert("Enter some text..");
            $("textarea").focus();
        }
        else
        {
            $("#flash").show();
            $("#flash").fadeIn(400).html('<span class="load">Loading..</span>');
            $.ajax({
                type: "POST",
                url: "insertPost.php",
                data: dataString,
                cache: true,
                success: function(html)
                {
                    $("#show").after(html);
                    document.getElementById('postTextarea').value='';
                    $("#flash").hide();
                    $("#postTextarea").focus();
                }  
            });
        }
    return false;
    });
});

和这个PHP代码:

<?php
include('inc/connect.php');
session_start();

$username = $_SESSION['user_login'];

$userSql = 'SELECT * FROM users WHERE username="'.$username.'"';
$userRes = mysql_query($userSql);
$user = mysql_fetch_assoc($userRes);

$postBody = mysql_real_escape_string($_POST['postTextarea']);
$postDate = date('Y-m-d');
$postTime = date('H:i:s');
$postAuthor = $user['firstname']." ".$user['lastname'];
$postAuthorID = $user['id'];
$sql = "INSERT INTO posts (body,author,postDate,postTime,posterID) VALUES ('".$postBody."','".$postAuthor."','".$postDate."','".$postTime."','".$postAuthorID."')";
$query = mysql_query($sql);

?>

最后发布帖子的HTML代码(遗憾地在重新加载页面后):

<div class="friendPosts">
    <div class="postMain">
        <div class="friendPic">
            <img src="img/profile.jpg" class="profilePic" />
        </div>
        <div class="nameDate">
            <div class="friendName">
                <a href=""><?php echo $post['author']; ?></a> <span><b>&middot;</b> <?php echo $post['postDate']; ?> <?php echo $post['postTime']; ?></span><?php if($post['posterID'] == $user['id']) { ?><a href="" title="Delete post"><span style="float: right;" class="deletePost">X</span></a><?php } ?>
            </div>

        </div>
        <div class="friendPost">
            <?php
            $myposts = $post['body'];
            echo "<p>".$myposts."</p>";
            ?>
        </div>
        <div class="postMenu">
            <a href="">Like</a> <b>/</b> <a href="">Dislike</a> <b>&middot;</b> <a href="">Share</a> <b>&middot;</b> <a class=".toggleComment">Comment (10)</a> <b>&middot;</b> <a href="">Flag</a>
        </div>
    </div>
</div>

希望你能提供帮助。感谢。

1 个答案:

答案 0 :(得分:1)

如果您使用AJAX调用提交表单,我建议它看起来像这样:

var input = $("#term").val(); /*your input field*/
$.ajax({
            type: "POST",
            url: 'search',
            data: {
                term: input,
            },
            success: function(response) {
                $('#divToShowStuff').append(response);
            }
        });

在这种情况下,我提交表单并将其发送到我的PHP框架中的搜索控制器。需要数据字段来获取从客户端到服务器端的输入。所以在我的搜索中我打电话:

$_POST['term']

并且成功显示搜索控制器在客户端div中发送给他的视图。

希望这会有所帮助。