Php 在不刷新jquery的情况下追加div

我想在不刷新页面的情况下添加一个div

以下是我的Javascript：

<input class="btnsubmit"  type="button" value="+Add Trivia" id="add_triviamodal"> 

function add_trivia()
{
    var PHOTO_TRIVIA = CKEDITOR.instances.Trivia_Photo.getData();
    var TITLE_TRIVIA = $('#TRIVIA_TITLE').val();
    var CAPTION_TRIVIA = CKEDITOR.instances.triviacap.getData();

$.post('insert_home.php',{TRIVIA_TITLE:TITLE_TRIVIA,TRIVIA_PHOTO:PHOTO_TRIVIA,TRIVIA_CAP:CAPTION_TRIVIA}).done(function(data){
    alert ("Trivia Successfully Added");
        location.reload(); \\what i do is just refresh the page
    });
}

函数add_琐事（）
{
var PHOTO_TRIVIA=CKEDITOR.instances.TRIVIA_PHOTO.getData（）；
var TITLE_TRIVIA=$（“#TRIVIA_TITLE”）.val（）；
var CAPTION_TRIVIA=CKEDITOR.instances.triviacap.getData（）；
$.post（'insert_home.php'，{TRIVIA_TITLE:TITLE_TRIVIA，TRIVIA_PHOTO:PHOTO_TRIVIA，TRIVIA_CAP:CAPTION_TRIVIA}）。完成（函数（数据）{
警报（“已成功添加琐事”）；
location.reload（）；\\n我所做的只是刷新页面
});
}

这就是我如何输出将使用上述ajax添加的数据

 echo "<div class=\"view view-sixth\">

              ".$Tri_IMAGE."


             <div class=\"mask\">
             <div class=\"divbutton\">
             <input  onclick='TRIVIA_EDIT($Tri_ID);' class=\"btnsubmit\"  type=\"button\" value=\"Edit\" id=\"edit_trivia\">
             <input  onclick='TRIVIA_DELETE($Tri_ID,this);' class=\"btnsubmit\"  type=\"button\" value=\"Delete\" id=\"delete_trivia\">
             </div> 
             <h2>".$Tri_TITLE."</h2>
             <p>".$Tri_CAPTION."</p>
             </div>
            </div>";
}

echo”
“$Tri_图像。”
“$Tri_标题。”
“$Tri_标题。”

";
}

您可以在jQuery中使用

append（）

将元素追加到DOM中。如果您的PHP返回了div。然后使用例如

$（'#trivias'）将其附加到DOM元素

编辑（以问题作者代码为例）：

我已将
location.reload（）
部分替换为附加返回div的代码

$.post('insert_home.php',{TRIVIA_TITLE:TITLE_TRIVIA,TRIVIA_PHOTO:PHOTO_TRIVIA,TRIVIA_CAP:CAPTION_TRIVIA}).done(function(data){
  $('#trivias').append(data);
}

在这里，我假设您已经有了一个带有琐事id的元素。例如，
…
已经在您的代码中的某个地方了。
只要将您的响应数据放入您想要的内容中即可

$.post('insert_home.php',{TRIVIA_TITLE:TITLE_TRIVIA,TRIVIA_PHOTO:PHOTO_TRIVIA,TRIVIA_CAP:CAPTION_TRIVIA}).done(function(data){
        alert ("Trivia Successfully Added");
        $('#idOfTheDivYouwantToPutResponseIn').html(data);
    });

将$.post（）回调更改为将insert_home.php中的HTML响应附加到DIV中

$.post('insert_home.php',{
    TRIVIA_TITLE: TITLE_TRIVIA,
    TRIVIA_PHOTO: PHOTO_TRIVIA,
    TRIVIA_CAP: CAPTION_TRIVIA
}).done(function(data){
    alert ("Trivia Successfully Added");
    $('#trivias').html(data);
});

在PHP中使用
json\u编码

$str = "<div class=\"view view-sixth\">
         ".$Tri_IMAGE."
             <div class=\"mask\">
             <div class=\"divbutton\">
             <input  onclick='TRIVIA_EDIT($Tri_ID);' class=\"btnsubmit\"  type=\"button\" value=\"Edit\" id=\"edit_trivia\">
             <input  onclick='TRIVIA_DELETE($Tri_ID,this);' class=\"btnsubmit\"  type=\"button\" value=\"Delete\" id=\"delete_trivia\">
             </div> 
             <h2>".$Tri_TITLE."</h2>
             <p>".$Tri_CAPTION."</p>
             </div>
            </div>";

echo json_encode($str);

我稍微编辑了一下你的帖子，以减少混乱。如果我犯了任何错误，请更正。另外，我假设AJAX调用的输出是您希望附加到某个位置的，对吗？没有，先生。：）底部的php脚本将是上面ajax的输出。在我看来，您根本不需要使用php/ajax。您能给我一个关于如何添加新div的答案吗？谢谢
$.ajax({
    type: "POST",
    url: 'insert_home.php',
    data: {TRIVIA_TITLE:TITLE_TRIVIA,TRIVIA_PHOTO:PHOTO_TRIVIA,TRIVIA_CAP:CAPTION_TRIVIA},
    dataType:'json',
    success: function (data) {
         $('#your_id').html(data);
    }
});