在 ajax/json 调用成功时更新 div答案

【问题标题】：Updating a div on success of a ajax/json call在 ajax/json 调用成功时更新 div
【发布时间】：2015-05-12 02:23:54
【问题描述】：

我的页面上有一个创建新专辑表单，旁边还有一个删除专辑表单。在专辑创建成功后，我想使用新创建的专辑详细信息自动更新删除专辑表单中的复选框列表。删除相册表单通过在页面中使用 php 获取它的复选框删除列表。删除专辑使用由专辑删除按钮触发的 ajax 调用，在 php 删除脚本成功返回时，复选框和父 div 将被删除。此时，要更新删除表单列表，必须重新加载页面。有没有办法在不重新加载页面的情况下更新删除列表。我看过的所有帖子都在谈论用 json 消息附加 html，这是行不通的，而且我还没有看到一个解决方案可以像刷新页面一样刷新 div，尽管最终如果似乎没有另一种方式，那就是我将不得不在我的相册中触发创建成功返回。

jquery 用于添加新专辑

<script type="text/javascript">

$(document).ready(function() {

    $("#add_new_catagory").click(function() {

    if($("#catagory_name").val()=="" || $("#albumDescription").val()=="")   {

    $("#addAlbumError").html("Please enter Album Name and Album Description");

        return false;   

    }else{


    $("#addAlbumError").html('<img src="image/ajax-loader.gif" width="16" height="16" alt=""/>');
    var albumName=$("#catagory_name").val();
    var albumDescription=$("#albumDescription").val();


$.post("includes/add_albumn_catagory.inc.php",{album_name:albumName,album_description:albumDescription},function(json)   {
    if(json.result === "success") {

        $("#addAlbumError").html(json.message);

        $('#add_category').get(0).reset();



    }else{
        $("#addAlbumError").html(json.message);
    }
});
    }   



});//submit click
});//doc ready
</script>

用于删除我想刷新的相册的 html 表单

<div class="list_album">

  <div id="deleteAlbum_title">Delete Album</div>

<form action="includes/delete_album.inc.php" id="album_delete">

      <p>

            <?php 
            while($row = mysqli_fetch_array($result3)){ ?>

          <div id="album_echo_list">

            <input name="albumid" type="checkbox" id="addImage" value="<?php echo $row['albumid'];?>">


            <?php echo $row['album_name'];?> <?php echo '';?><?php echo $row['albumDescription'];?> <?php echo '<br/>';?>
  </div> 
            <?php } ?>
            <br>
</p>


        </form>


<input name="submit" type="button" id="delete_album_but" style="display:none" title="Delete Album" value="Delete Album" form="album_delete"/>

    <div id="deleteAlbumNotice" style="display: block">Choose an Album to Delete<br>By Deleting an Album all pictures and subdirectories in the Album will be Deleted Also!</div>

  <div id="deleteAlbum"></div>

</div>
</div>

我希望我能够正确解释这一点，并且我已经发布了相关代码

【问题讨论】：

您希望更新什么内容？

标签： php jquery html ajax

【解决方案1】：

您期望响应 JSON 被解析，但您从未告诉 $.post 它以 JSON 形式返回。添加另一个参数：

$.post("includes/add_albumn_catagory.inc.php",{album_name:albumName,album_description:albumDescription},function(json)   {
    if(json.result === "success") {

        $("#addAlbumError").html(json.message);

        $('#add_category').get(0).reset();



    }else{
        $("#addAlbumError").html(json.message);
    }
}, "json"); // <<--- response dataType

【讨论】：