Question

我正在通过AJAX提交html表单，然后将结果附加到特定的div元素上。对应的ajax是：-

$(document).ready(function(){
$('.commentbutton').click(function(){
    var idb=$(this).attr('id');
    var formid=$('#Comment'+idb);
    datab=getFormData(formid);
    $.ajax({
        type:"POST",
        url:'/submit/channelcomment',
        data:datab,
        success:function(data){
          console.log(data.content);
          console.log(data.profile);
          var html="<div class='CommentRow'><a href='/Channel/"+data.profile+"/'style='font-weight: bolder;margin-right: 10px;display: inline-block;'>"+data.profile+"</a>"+data.content+"</div>"
          console.log('Done');
          idt=$('#CommentBody'+idb);
          console.log(idt);
          idt.append(html);
        },

    }),
    event.preventDefault();
});
  });
  function getFormData($form){
var unindexed_array = $form.serializeArray();
var indexed_array = {};

    $.map(unindexed_array, function(n, i){
    indexed_array[n['name']] = n['value'];
    });

return indexed_array;
}

我要附加html的所需位置如下：-

<div class="CommentBody" id="CommentBody{{c.id}}">
</div>

此处c.id和idb等于1，但未附加html。

Answer 1

你说

但是它没有附加html。

什么是实际行为？

我尝试了如下的伪代码，它工作正常。

$(document).ready(function() {
  $('.commentbutton').click(function() {
    var html = "<div class='CommentRow'><a href='/Channel/data.profile/'style='font-weight: bolder;margin-right: 10px;display: inline-block;'>data.profile</a>data.content</div>"
    var idb = '1';
    idt = $('#CommentBody' + idb);
    alert(idt);
    idt.append(html);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='commentbutton'>Comment</button>
<div class="CommentBody" id="CommentBody1">
</div>

为什么我的Ajax函数无法在目标div元素上附加html？

1 个答案: