使用 ajax 使用 for 循环将 html 页面加载到选项卡中。引导程序 3答案

【问题标题】：loading an html page into a tab using ajax using a for loop. bootstrap 3使用 ajax 使用 for 循环将 html 页面加载到选项卡中。引导程序 3
【发布时间】：2014-03-08 16:53:06
【问题描述】：

我目前正在处理一个地址簿，我的主页使用 for 循环加载一系列联系人名称的选项卡，如下面的代码所示。如何使用 ajax 将每个联系人的信息加载到其各自的选项卡中？我正在使用引导程序 3.0。

主页：

<ul class="nav nav-tabs">
    {% for contact in object_list %}
    <li class="contact">
       <li><a href="contact.get_absolute_url" data-toggle="tab">{{ contact.first_name }}    </a></li> 
    {% endfor %}
</ul>

{% for contact in object_list %}
<div class="tab-content">
  <div class="tab-pane" id="contact.get_absolute_url"></div>
</div>
{% endfor %}

我想将每个联系人信息加载到其各自的选项卡中，即contact.html。

<h1>{{ contact }}</h1>

<p>Email: {{ contact.email }}</p>
<p>Number: {{ contact.number }}</p>

【问题讨论】：

标签： javascript jquery ajax django twitter-bootstrap

【解决方案1】：

ajaxtest.html

     {% load staticfiles %}

 <head>
<script src="{% static 'js/jquery-1.10.2.min.js' %}"></script>
<script>

    $(document).ready(function() {

        $('#ajaxform').submit(function(event) {

            var $form = $(this);
            var serializedData = $form.serialize();

            $.post('/ajaxtest/', serializedData, function(response) {
                alert(response);
                 });

            event.preventDefault();

        });
    });

</script>

{% csrf_token %}

    <fieldset>
        {% for field in form %}
            <label for="{{ field.label }}">{{ field.label }}</label>
            <input id="{{ field.label }}" type="text" name="{{ field.html_name }}" />
        {% endfor %}

        <button type="submit">Submit</button>
    </fieldset>
 <select name="p1">
     {% for i1 in form %}
     <option>{{ i1.Fname }}</option>
     {% endfor %}
 </select>
 <select name="p2">
     {% for i2 in form %}
     <option>{{ i2.Lname }}</option>
     {% endfor %}
 </select>
   <table>
    <thead>
     <tr>
                <th>first Name</th>
                <th>last Name</th>
                <th> Village</th>
                <th>Dist</th>
            </tr>
    </thead>
    <tbody>
       {% for Loksabha1 in form %}

            <tr>
                <td>{{ Loksabha1.Fname }}</td>
                <td>{{ Loksabha1.Lname }}</td>
                <td>{{ Loksabha1.Village }}</td>
                <td>{{ Loksabha1.Dist }}</td>
            </tr>
          {% endfor %}
    </tbody>
</table>

</form>

view.py

def ajax_test(request):

if request.is_ajax() and request.method == 'POST':
    form = AjaxTestForm(request.POST)

    if form.is_valid():
        print (request.POST)
        # I want this to be alerted
        return HttpResponse('Your AJAX form test was successful!')
    else:
        return HttpResponse('Your AJAX form test failed miserably!')
else:
    form = AjaxTestForm()

return render(request, 'ajaxtest.html', {'form':form} )

【讨论】：

有没有更流畅的方法来解决这个问题？有一个 for 循环并使用 django 提供的表单字段？
甜蜜正义的碰撞