성공적인 Ajax 실행시 div 자동 새로 고침

Question

ajax를 사용하여 새 데이터를 성공적으로 삽입 한 후 데이터를 표시하는 테이블이 포함 된 div를 새로 고치려고합니다.

여기 내 코드입니다 :

  $("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.') 
}