jquery - 如何将ajax html响应附加到当前div旁边

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
});

ajaxDOM除了id的div和 内容外，响应将与上述相同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

你可以像这样添加父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 3

您的选择器中有一些语法错误，并尝试在回调中附加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 4

对于 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 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);

        }
    });
});