如何在成功执行ajax时自动刷新div

时间:2011-09-06 02:52:26

标签: jquery ajax

我正在尝试刷新包含一个表的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刷新,但它们不适合我对此问题的需求。谁能帮我这个?谢谢你的帮助。

1 个答案:

答案 0 :(得分: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.')
 }