追加一个div而不刷新jquery答案

【问题标题】：Append a div without refreshing jquery追加一个div而不刷新jquery
【发布时间】：2014-01-15 03:01:29
【问题描述】：

我想在不刷新页面的情况下添加一个 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
    });
}

这就是我输出将使用上面的 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>";
}

【问题讨论】：

我稍微编辑了您的帖子以减少混乱。如有错误请指正。
另外，我假设 AJAX 调用的输出是您想要附加到某处的内容，对吗？
不，先生。 :) 底部的 php scipt 将是上面 ajax 的输出。
在我看来你根本不需要使用 PHP/AJAX。
你能给我一个关于如何追加新 div 的答案吗？谢谢

标签： php jquery html css content-management-system

【解决方案1】：

您可以在 jQuery 中使用 append() 将元素附加到 DOM。如果 div 由您的 PHP 返回。然后使用 $('#trivias').append(data); 将其附加到 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);
}

这里我假设你有一个带有 trivias id 的元素。例如 <div id="trivias">...</div> 已经在您的代码中。

【讨论】：

【解决方案2】：

只需将您的响应数据放入您想要的任何地方

$.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);
    });

【讨论】：

【解决方案3】：

更改您的 $.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);
});

【讨论】：

【解决方案4】：

在 PHP 中使用 json_encode

$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({
    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);
    }
});

【讨论】：