追加div而不刷新jquery

Question

我想添加一個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>";
}

Answer 1

您可以在jQuery中使用append()將元素追加到DOM。 如果div由您的PHP返回。 然后通過使用$('#trivias').append(data);將其附加到DOM元素$('#trivias').append(data);

編輯（以問題作者代碼為例）：

我已經用代碼替換了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的元素。 例如， <div id="trivias">...</div>已經在代碼中的某個位置。

Answer 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);
    });

Answer 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);
});

Answer 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);
    }
});