jquery - ajax执行成功后如何自动刷新div

Question

我正在尝试刷新包含表的 div，该表在使用 ajax 成功插入新数据后显示数据。

这是我的代码:

            $("span.save").live('click', function() { 

                var id = $(this).attr('id');
                var name = $('.ingr_name_' +id).val();
                var amount = $('.amt_' +id).val();
                var unit = $('.unit_' +id).val();

                if(name.length > 0 && amount.length > 0 && unit.length > 0)
                {   
                    var dataString = "id=<?php echo $this->uri->segment(3); ?>&name=" +name +"&amount=" +amount +"&unit=" +unit;

                    //alert(dataString);

                    $.ajax({
                       type: "POST",
                       url: "<?php echo base_url(); ?>recipe/add_ingr",
                       data: dataString,
                       success: function(){                         
                           //I wanted to refresh the div here. Where the div's id="ingredients_list"

                           alert('Recipe ingredient added.')
                       },
                       error: function(xhr, status, error) {
                            alert(error)
                       }
                    });

                    return false;
                }
                else
                {
                    alert("Please fill out all fields.");   
                }

            });

我一直在寻找如何进行 div 刷新，但它们不符合我对这个问题的需求。谁能帮我这个？感谢您的帮助。

Answer 1

在 ajax 调用的 success 处理程序中，您将在第一个参数中得到响应。使用它，您可以创建所需的标记，然后将其附加到 ingredients_list 元素中。

success: function(response){
    //Using response object create the desired markup for recipe table 

    $("#ingredients_list").html("markUpCreatedUsingResponseFromServer");
    alert('Recipe ingredient added.')
 }