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

Question

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:

<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>

视图.py

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

现在弹出窗口显示如下：

我想显示如下

我正在将数据从数据库加载到弹出 div。问题是，它只显示表单数据而不是弹出的 html。例如它没有显示按钮，“名字”但它显示了带有值的文本框的名字字段。

Answer 1

也许试试这样。PS我不是这方面的专家:)

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

Answer 2

那是因为下面的行......

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

此行将简单地将数据作为 HTML 放入 divadd_form中。因此，您之前在该 div 中拥有的任何内容都将被数据替换。