python - 将数据从数据表传递到模式Django

Question

我想显示从数据表到模态引导的数据。

例：

Name    | prenom | id |edit
example | test   |  2 |button edit 

按钮会将数据发送到模式显示以进行更新。

按钮代码：

<a class="btn btn-info" role="button" data-toggle="modal" data-form="{% url 'up' id=val.id }" data-target="#myEdit" >Edit</a>

模态代码：

<div class="modal fade" id="myEdit" role="dialog">
    <div class="modal-dialog">
        <form  class="well contact-form" method="post" action="{% url 
      'up'}">
            {% csrf_token %}
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <label for="usr">Name:</label>
                    <input type="text" class="form-control" required="" name="uss" value="{{ instance.name }}" id="uss">
                    <label for="pwd">Password:</label>
                    <input  type="password"  class="form-control" required="" value="{{ instance.sname }}" name="pwd" id="pwd" >
                </div>
                <div class="modal-footer">
                    <button  type="submit" class="btn btn-default">Valider</button>
                    <button  value="" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </form>
    </div>
</div>

views.py

def posts_edit(request, id=None):
    instance = get_object_or_404(namemodel, id=id)
    context={
        'instance': instance
    }
    return render(request, '/ges/sortie/', context)

我想在模式中显示两个值 Name和 prenom，数据从数据库中显示出来。

我认为最好的解决方案是使用Ajax。

Answer 1

您的模态代码包含一个form，但是您正在询问如何显示一些数据，因此这使我有点困惑。请更清楚。
我假设您想在modal上显示一些数据，并且应该使用AJAX从服务器中检索这些数据。
有几种方法可以做到这一点。让我为您解释两个一般选择：
1.服务器处理的HTML
在初始模板中，您只有一个空的div，可以使用HTML代码进行更新。
每当您想要显示一些数据时，您都会执行AJAX请求，该请求将返回HTML代码（在本例中为modal HTML代码），只需将其插入到div中即可。
2.客户端处理的HTML
在初始模板中，您可能具有HTML代码的框架（在本例中为modal HTML框架），并且可以通过javascript更新其上的某些值。
每当您想要显示一些数据时，您都会执行AJAX请求，该请求可能返回JSON数据，并使用该信息来更新HTML框架中的值。

差异性
使用第一个意味着在后端（在本例中为Django模板）编写更多代码，而后者则鼓励您在前端编写更多的JavaScript代码。
由于在服务器端渲染模板的速度非常慢，并且传输的数据也更大（所有HTML代码通常包含的字节数都大于原始JSON数据），因此前一个选项可能会更慢。无论如何，我认为对于这种简单情况而言，这种区别是不相关的。

码
由于我更喜欢​​在后端工作而不是编写过多的JavaScript，因此以下解决方案将是服务器处理的HTML的实现。这是（顺便说一句，您非常接近）：
您的主要模板：

<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Prenom</th>
      <th>ID</th>
      <th>Edit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ val.name }}</td>
      <td>{{ val.prenom }}</td>
      <td>{{ val.id }}</td>
      <td><a class="btn btn-info" class="open-modal" data-url="{% url 'up' id=val.id }">Edit</a></td>
    </tr>
    <tr>
      ...
    </tr>
    ...
  </tbody>
</table>

<!-- Here we create this empty div for inserting modal -->
<div id="modal-div"></div>

Javacript在主模板中：

var modalDiv = $("#modal-div");

$(".open-modal").on("click", function() {
  $.ajax({
    url: $(this).attr("data-url"),
    success: function(data) {
      modalDiv.html(data);
      $("#myEdit").modal();
    }
  });
});

这里重要的是，我们有一个按钮和一个jQuery事件，当有人单击它时会触发该事件。触发的函数执行AJAX调用，在 modal-div中设置返回的HTML，最后打开全新的模式。
您的控制器（Django视图）：

def posts_edit(request, id=None):
    instance = get_object_or_404(namemodel, id=id)
    context={
        'instance': instance
    }
    return render(request, 'modal.html', context)

您的模态模板 modal.html

<div class="modal fade" id="myEdit" role="dialog">
  <div class="modal-dialog">
    <form  class="well contact-form" method="post" action="{% url 'up'}">
      {% csrf_token %}
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <label for="usr">Name:</label>
          <input type="text" class="form-control" required="" name="uss" value="{{ instance.name }}" id="uss">
          <label for="pwd">Password:</label>
          <input  type="password"  class="form-control" required="" value="{{ instance.sname }}" name="pwd" id="pwd" >
        </div>
        <div class="modal-footer">
          <button  type="submit" class="btn btn-default">Valider</button>
          <button  value="" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </form>
  </div>
</div>