javascript - 在 Django 中单击时更新包含项目详细信息的页面

Question

我是 ajax 新手，知道我需要使用它来完成我想要做的事情，但似乎无法弄清楚。

我有一个公司列表，我想当他们单击表行时在页面上显示有关公司的详细信息。当用户单击不同的行时，我希望详细信息更改为单击的新公司的详细信息。

HTML:

{% block content %}
  <div class='container'>
    <h3>Hello, </h3>
  </div>
  <div class='col-md-6'>
    <div class='panel panel-primary'>
      <div class='panel-heading'>
        <h3 class='panel-title'>Call List</h3>
      </div>
      <div class='panel-body' style="max-height: 70em ;overflow-y: scroll;">
        <table class="table table-striped table-hover ">
          <thead>
            <tr>
              <th>Company Name</th>
              <th>Other Information</th>
            </tr>
          </thead>
          <tbody>
            {% for item in companies %}
              <tr onclick='UpdatePKFunction({{ item.pk }})'>
                <td>{{ item.CompanyName }}</td>
                <td>{{ item.LineOfBusiness }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <script>
    function UpdatePKFunction(pk) {
      pk = pk
      $.ajax({
        url: '/updateDetails',
        success: function(pk) {
          $('#DetailView').html(pk);
        }
      });
    };
  </script>
  <div class='col-md-4'>
    <div class='panel panel-info'>
      <div class='panel-heading'>
        <h3 class='panel-title'>Company Information</h3>
      </div>
      <div class='panel-body' id='DetailView'>
      </div>
    </div>
  </div>
{% endblock %}

我要插入的内容:

{% for item in companies %}
  {% if item.pk == pk %}
    <td>
      <tr>item.CompanyName</tr>
    </td>
  {% endif %}
{% endfor %}

查看.py

from django.shortcuts import render
from django.http import HttpResponse

from mainlist.models import hoovers_companies

# Create your views here.
def index(request):
    companies = hoovers_companies.objects.all()
    company = hoovers_companies.objects
    return render(request, 'mainlist/index.html', {'companies': companies, 'company': company})

def updateDetails(request):
    companies = hoovers_companies.objects.all()
    return render(request, 'mainlist/updateDetails.html', {'companies': companies, 'pk': 1})

url.py

from django.conf.urls import url
from . import views

urlpatterns = [
        url(r'^updateDetails', views.updateDetails, name='updateDetails'),
        url(r'^$', views.index, name='index'),
]

任何帮助或指出正确的方向将不胜感激!

Answer 1

我能够找到我的问题的答案，并想将其发布在这里，以防它对任何人有帮助。

*请注意:请勿将此方法用于任何敏感或私有(private)信息。这是一个简单的 GET 请求，所有信息都可以在 URL 中看到。

首先，在我想要显示信息的模板中，我将单击项目的主键传递给了我的函数。

<ELEMENT onclick='UpdatePKFunction({{ item.pk }})'>

然后我将此函数放入我的模板中。 #DetailView 引用了我想要放置动态内容的空 div 的 id。这允许我将所选项目的主键作为 URL 参数传递到 View 。

<script>
  function UpdatePKFunction(pk) {
    pk = pk
    $.ajax({
      url: 'updateDetails/' + pk,
      success: function(data) {
        $('#DetailView').html(data);
      }
    });
  };
</script>

请参阅下面的 urls.py 文件，了解它如何捕获主键 (pk) 并将其传递给 views.py。它从 views.py 传递给模板。

# urls.py

urlpatterns = [
url(r'^updateDetails/(?P<pk>.+?)/$', views.updateDetails, name='updateDetails'),
url(r'^$', views.index, name='index'),
]


# views.py

def updateDetails(request, pk):
    company = companies.objects.get(pk=pk)
    return render(request, 'mainlist/updateDetails.html', {'company': company, 'pk': pk})

完成此操作后，只需创建一个新模板，其中包含您开始使用的空 div 内所需的任何 html。我的模板是 mainlist/updateDetails.html