如何添加AJAX HTML響應旁邊當前格

Question

我已經DOM如下，

<div id='level-1'> 
    <ul> 
    <li><span><a>Mike</a></span></li> 
    <li><span><a>John</a></span></li> 
    <li><span><a>Ket</a></span></li> 
</ul> 
</div> 

和jQuery如下，

$(document).on('click','div[id^=[level] ul li span a',function(){ 

//Making ajax request,no problem in getting the response 
// Here I need to append response next to the current div i,e div#level-1 or div#leve-2 
}); 

ajax響應將是與上面相同DOM除div的id和anchor tag的內容。 id將是level-2或level-3我， +1轉換爲div的當前值。

Answer 1

嘗試

$(document).on('click','div[id^=level] ul li span a',function(){ 
    var parentDiv = $(this).closest("div[id^=level]"); 

    $.ajax(...).done(function(html) { 
     parentDiv.after(html); 
    }); 

}); 

Answer 2

你有一點語法錯誤，你的選擇裏面，以及嘗試添加response你的DIV在success回調：

$(document).on('click','div[id^="level"] ul li span a',function(){ 
    var $this = $(this); 
    $.ajax({ 
     ........... 
     success: function(response){ 
      $this.closest('div[id^=level]').append(response) 
     }, 
    }); 
}); 

Answer 3

對於您可以將Ajax響應將附加功能添加到請求的響應中，例如： （僞代碼）

$.ajax({ 
    url: "test.html", 
    context: document.body 
}).done(function() { 
    //add response functionality here e.g 
    if(var i; i < response.length; i++) { 
    $('#level-'+(i+1)).append('<div id=level-'+(i+1)+' some new data </div>'); 
    } 
}); 

如果您從具有多行的ajax請求中獲取數組 - 您可以遍歷每行並使用.append（）jquery函數將新html附加到當前div。

http://api.jquery.com/append/

Answer 4

你可以添加父DIV這樣嗎？

<div id="levels"> 
<div id='level-1'> 
    <ul> 
    <li><span><a>Mike</a></span></li> 
    <li><span><a>John</a></span></li> 
    <li><span><a>Ket</a></span></li> 
    </ul> 
</div> 
</div> 

你可以在jQuery的

$("a").on("click",function(){ 
    // on ajax success 
    $(this).parent("#levels").append("whatever you want!"); 

}); 

Answer 5

$('.submit').click(function() { 
    var html=''; 
    $.ajax({ 
     dataType: "json", 
     url: "http://www.yoururl.com/", 
     success: function (data) { 
      var content = 'Title : '+data.Title ; 
      content += ' Year : '+data.Year ; 
      content += ' Rated : '+data.Rated ; 
      content += ' Released : '+data.Released ; 
      $("#text").append(content); 

     } 
    }); 
});