在没有 AJAX 的情况下将表中单击项目的 ID 发送到服务器

Question

我有一个包含多行数据的表。用户可以滚动浏览每一行，单击一行，并被提示对该行执行某些操作（更新、删除等）。

我能够使用 Javascript 获取单击行的 id（该 id 很重要，因为它是模型对象的 id）并使用该 id 对服务器进行 AJAX 调用，但是我不知道如何在第一次服务器调用后重定向到一个页面，而不需要第二次访问服务器，因为 AJAX 需要响应。

所以我试图在没有 AJAX 的情况下完成此任务。有没有办法将行的 id 传递到下面模式的 url（在 a-tag 中）？或者是否有更好的模式来完成我所缺少的这一点。这个问题好像有一个明显的解决方案，我想多了……

这是我的表的相关代码。

编辑：我也在使用 Django 作为我的后端/模板引擎。

<tbody id="trip-request-table">
    {% for key in need_trips %}
    <tr id={{key.trip_ptr_id}} onClick="updateRow(this.id)">
        <td>{{key.created|date:'Y-m-d'}}</td>
        <td>{{key.user.name}}</td>
        <td>{{key.arrival_date|date:'Y-m-d'}}</td>
    </tr>
    {% endfor %}
</tbody>

这是获取 id 并触发模式的 Javascript：

    function updateRow(id) {
        //alert('id: ' + id);
        var rowId = id;
        var modal = $('#manage-trip');

        var row = document.getElementById(id);
        var cells = row.getElementsByTagName('td');
        var arrivalCity;
        var departureDate;

        for (var i =0; i < cells.length; i++) {
            if(i == 4) {
                departureDate = moment(cells[i].innerHTML).format('MMMM Do, YYYY');
            } else if(i == 6) {
                arrivalCity = cells[i].innerHTML;
            } 
        }

        modal.find('.modal-body').text('Would you like to update your trip to ' + arrivalCity + ' on ' 
            + departureDate + '?');
        //updateRow.find('.modal-body input').val(id);
        modal.val(id);
        console.log('show modal');
        modal.modal('show');
        console.log('trip id: ' + id);

        $("#update-trip").off().click(function(event) {
            $('#manage-trip').modal('hide');
            var contentType = "application/x-www-form-urlencoded";
            var processData = true;
            var endpoint = "{% url 'trips:updateTripGet' pk=1 %}";
            var payload = false;

            updateTrip(contentType, processData, endpoint, payload);
        });

    }

这是模态代码：

<div class="modal" id="manage-trip" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Edit your trip</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <a href="{% url 'members:updateTrip' %}" type="button" class="btn btn-primary">Update</a>
        <!--<button type="button" class="btn btn-primary" id="update-trip">Update</button>-->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#delete-trip">Delete</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 1

我解决这个问题的方法是让模态触发这段代码：

$("#update-trip").off().click(function(event) {
    $('#manage-trip').modal('hide');
    var contentType = "application/x-www-form-urlencoded";
    var endpoint = "{% url 'members:updateTrip' %}";
    var payload = false;

    //updateTrip(contentType, processData, endpoint, payload);
    submitForm(contentType, endpoint, rowId);
});

该代码块调用一个动态创建表单并将其提交给服务器的函数。我想这对大多数 Web 开发人员来说只是另一个明显的解决方案，但我是菜鸟。我确定我会清理一些刚刚激发它的工作。

这个解决方案的好处是您可以避免在每个表格行中创建表单，等等。

function submitForm(contentType, endpoint, rowId) {
    var form = document.createElement("form");
    var element1 = document.createElement("input");
    var element2 = document.createElement("input");

    form.method = "POST";
    form.enctype = contentType;
    form.action = endpoint;
    element1.type = 'hidden';
    element1.value= rowId;
    element1.name= "trip_id";
    form.appendChild(element1);
    element2.type = 'hidden';
    element2.value= '{{ csrf_token }}';
    element2.name= 'csrfmiddlewaretoken';
    form.appendChild(element2);

    document.body.appendChild(form);

    form.submit();
}