Javascript 如何在将数据加载到弹出窗口时显示div的html

javascript:

$('.follower_name').click(function () {              
      var id = $(this).attr('id');  
      var csrf_token = $("#csrf_token").val();
      $.ajax({ 
       data:{
            csrfmiddlewaretoken: ('{{csrf_token}}'),                          
            id:id,  
            edit_followup:true              
            },
      type:'POST',
      url: '/setting/edit_follower/',
      success: function(data) {    
      $('#add_form').show();
      $('#add_form').html(data);
     alert(data);
     }
    });
   });

html:

现在弹出窗口显示如下：

我想展示如下

我正在将数据从数据库加载到弹出分区。问题是，

---

它只是单独显示表单数据，而不是弹出窗口的html。例如，它不是显示按钮，“名字”，而是显示带有名字字段值的文本框

也许可以这样试试。另外，我不是这方面的专家：）

$（'.follower_name'）。单击（函数（）{
var id=$（this.attr（'id'）；
var csrf_token=$（“#csrf_token”）.val（）；
$.ajax（{
数据：{
csrfmiddlewaretoken:（{{csrf_token}}'），
id:id，
编辑后续：true
},
类型：'POST'，
url:“/setting/edit_follower/”，
成功：函数（数据）{
$（'#add_form'）.show（）；
$（'#添加表单'）.html(
'' +
''+'{%csrf_令牌%}'+
“后续细节”+
“
”+
'' +
'' +
'名字：{{form.firstname}}'+
'' +
'' +
'姓氏：{{form.lastname}}'+
'' +
'' +
'电子邮件：{{form.Email}}'+
'' +
'' +
'' +
'取消'+'{%include“按钮/add.html”%}'+
'' +
'' +
'');
警报（数据）；
}
});
});

这是因为下面的一行

$('#add_form').html(data);

此行将简单地将数据作为HTML放在div

add\u form

中。

---

因此，在该div中包含的所有内容都将被数据替换。

您能为我提供一个解决方案吗？好的，我在等待您的回答。我的问题是整个div都被表单数据替换，而不是将表单数据插入表单字段，因此我的其他html都丢失了。如何将html与表单数据一起追加。

def edit_follower(request):  
    if request.method == 'POST':
    """"""'
    return HttpResponse(form)

$('.follower_name').click(function () {              
  var id = $(this).attr('id');  
  var csrf_token = $("#csrf_token").val();
  $.ajax({ 
   data:{
        csrfmiddlewaretoken: ('{{csrf_token}}'),                          
        id:id,  
        edit_followup:true              
        },
  type:'POST',
  url: '/setting/edit_follower/',
  success: function(data) {    
  $('#add_form').show();
  $('#add_form').html(
    '<div id="add_form" style="display:none" class="edit_follow">' +
    '<form id="form"  method="post" action="edit_follower/{{follower.id}}/" onsubmit="return form_validate()">' + '{% csrf_token %}' +
    '<h2> Follow-up details</h2>' +
    '<br />' +
    '<table  width="100%">' +
        '<tr>' +
            '<td style="width:100px;">First name:</td><td>{{ form.firstname}}</td>' +
        '</tr>' +
        '<tr>' +
            '<td style="width:100px;">Last name:</td><td>{{ form.lastname}}</td>' +
        '</tr>' +
        '<tr>' +
            '<td>Email:</td><td>{{ form.email}}</td>' +
        '</tr>' +
     '</table>' +
     '<div style="width:180px;margin:20px 5px 0 10px" align="right">' +

     '<button style="margin-right:10px;" type="button" class="close" name="cancel" class="forward backicon">Cancel</button>' +  '{% include "buttons/add.html" %}' +
     '</div>' +
 '</form>' +
'</div>');

 alert(data);
 }
});
});

$('#add_form').html(data);