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

view.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})

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

我能够找到我的问题的答案，并希望在此发布，以防它对任何人都有帮助。

*请注意：请勿将此方法与任何敏感或私人信息一起使用。这是一个简单的GET请求，可以在URL中看到所有信息。

首先，在我希望显示信息的模板中，我将点击的项目的主键传递给我的函数。

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

然后我把这个功能放在我的模板中。 #DetailView引用了我要放置动态内容的空div的ID。这允许我将所选项的主键作为URL参数传递给视图。

<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

点击Django中的项目详细信息更新页面

1 个答案: