Javascript 如何使用jQuery在事件发生后将结果存储到数据库并附加到新的div中？_Javascript_Jquery_Html_Symfony

Javascript 如何使用jQuery在事件发生后将结果存储到数据库并附加到新的div中？

javascript jquery html symfony

Javascript 如何使用jQuery在事件发生后将结果存储到数据库并附加到新的div中？,javascript,jquery,html,symfony,Javascript,Jquery,Html,Symfony,我正在管理社交群组墙，并试图找到一种解决方案，使我的群组墙在不刷新页面的情况下保持动态。有一个文本区域，单击“发布”按钮时需要。数据存储在数据库中，在刷新页面时，我希望找到已发布的文本：以下是脚本： <script> $(document).ready(function() { $("#btnpost").click(function () { $("#publication").p

我正在管理社交群组墙，并试图找到一种解决方案，使我的群组墙在不刷新页面的情况下保持动态。有一个文本区域，单击“发布”按钮时需要。数据存储在数据库中，在刷新页面时，我希望找到已发布的文本：

以下是脚本：

  <script>
            $(document).ready(function() {
                $("#btnpost").click(function () {
                    $("#publication").prepend('<div class="panel panel-success rounded shadow" style="text-align: left;margin-bottom: 5px;">' +
                                    '<div class="panel-heading no-border">'+
                                    '<div class="pull-left half">'+
                                    '<div class="media" style="text-align: left;">'+
                                    '<div class="media-object pull-left" style="margin-top: 35px;">'+
                            '<img src="http://bootdey.com/img/Content/avatar/avatar2.png" style="width: 40px;height: 40px;">' +
                            '</div>'+
                            '</div>'+
                                    '</div>'+
                            '<a href="">test profile</a>'+
                            '<span class="text-white h6" style="display: block; color: black;">on 8th June, 2014</span>'+
                            '<br>'+
                            '<span style="color: black;margin-bottom: 10px;word-break: break-all  ">#wonderful place man congratulationhh </span>'+
                            '</div>'+
                    '</div>'+
                    '<div class="panel-footer">'+
                    '<form action="#" class="form-horizontal">'+
                            '<div class="form-group has-feedback no-margin">'+
                            '<input class="form-control" type="text" placeholder="Votre commentaire ici..." style="width: 95%;margin-left: 10px;">'+
                            '</div>'+
                            '</form>'+
                            '</div>');
                });
            });
        </script>


$（文档）.ready（函数（）{
$（“#btnpost”）。单击（函数（）{
$（“#出版物”）。前缀（“”）+
''+
''+
''+
''+
'' +
''+
''+
''+
''+
“2014年6月8日”+
“
”+
“#美好的地方，祝贺你”+
''+
''+
''+
''+
''+
''+
''+
''+
'');
});
});

我想知道如何在不查看所有代码的情况下生成存储在其div中的数据，这里是一个示例

user\u id、title、posttext

只是用户输入的文本字段。

user\u id

用于在发送到数据库时识别用户

您可以将这些值作为

POST

发送到脚本，在本例中，脚本是

POST.php

，但您可以使用任何东西

在

POST

返回后，ajax将在

data

中返回结果，但这将取决于返回结果的方式和需要。您可以使用分隔符将其发回并使用

split（）

将其分解，也可以将其作为

json

发回

此方法不会刷新页面，并将在您的页面上生成数据

<script>
$(document).ready(function() {
    $("#btnpost").click(function () {
        // get user data input
        var user_id = $('#user_id').val();
        var title = $('#title').val();
        var posttext = $('#posttext').val();

        // send data to db with post
        $.ajax({
            type: "POST",
            url: "post.php?",
            data:"user_id="+ user_id+
            "&title="+ title+
            "&posttext="+ posttext
            success: function (data) {
                // on successful return data and prepend
                $("#publication").prepend(
                    '<div class="panel panel-success rounded shadow" style="text-align: left;margin-bottom: 5px;">' +
                    '<div class="panel-heading no-border">'+
                    '<div class="pull-left half">'+
                    '<div class="media" style="text-align: left;">'+
                    '<div class="media-object pull-left" style="margin-top: 35px;">'+
                    '<img src="http://bootdey.com/img/Content/avatar/avatar2.png" style="width: 40px;height: 40px;">' +
                    '</div>'+
                    '</div>'+
                    '</div>'+
                    '<a href="">test profile</a>'+
                    '<span class="text-white h6" style="display: block; color: black;">on 8th June, 2014</span>'+
                    '<br>'+
                    '<span style="color: black;margin-bottom: 10px;word-break: break-all  ">#wonderful place man congratulationhh </span>'+
                    '</div>'+
                    '</div>'+
                    '<div class="panel-footer">'+
                    '<form action="#" class="form-horizontal">'+
                    '<div class="form-group has-feedback no-margin">'+
                    '<input class="form-control" type="text" placeholder="Votre commentaire ici..." style="width: 95%;margin-left: 10px;">'+
                    '</div>'+
                    '</form>'+
                    '</div>'
                );
            }
        });     
    });
});
</script>


$（文档）.ready（函数（）{
$（“#btnpost”）。单击（函数（）{
//获取用户数据输入
var user_id=$（'#user_id'）.val（）；
var title=$（'#title'）.val（）；
var posttext=$（'#posttext'）.val（）；
//使用post将数据发送到数据库
$.ajax({
类型：“POST”，
url:“post.php？”，
数据：“用户id=”+用户id+
“&title=“+title+
“&posttext=“+posttext
成功：功能（数据）{
//关于成功返回数据和预结束
$（“#出版物”）。前置(
'' +
''+
''+
''+
''+
'' +
''+
''+
''+
''+
“2014年6月8日”+
“
”+
“#美好的地方，祝贺你”+
''+
''+
''+
''+
''+
''+
''+
''+
''
);
}
});     
});
});

这里没有看到所有代码就是一个例子

user\u id、title、posttext