POST-запросы Javscript сохраняются в базе данных в порядке, отличном от отправленного - PullRequest
Новая
       4

POST-запросы Javscript сохраняются в базе данных в порядке, отличном от отправленного

0 голосов
/ 28 марта 2020

Я уверен, что есть гораздо более элегантный способ написания этого JS с использованием a для l oop (открыт для предложений!).

Я пытаюсь использовать JS для POST в мою django базу данных, используя django REST. Приведенный ниже код достигает этого, но записывается не по порядку ...

Пользователь вводит текст в 10 различных текстовых полей, а затем сценарий записывает их в базу данных.

Проблема заключается в том, что что когда он записан в базу данных, он не в том порядке, в котором он был введен на веб-странице. Это кажется случайным. Есть идеи почему?

addAgendaItems. js

function saveUpdates(id) {
  let ai1 = document.getElementById("item1").value
  let ai2 = document.getElementById("item2").value
  let ai3 = document.getElementById("item3").value
  let ai4 = document.getElementById("item4").value
  let ai5 = document.getElementById("item5").value
  let ai6 = document.getElementById("item6").value
  let ai7 = document.getElementById("item7").value
  let ai8 = document.getElementById("item8").value
  let ai9 = document.getElementById("item9").value
  let ai10 = document.getElementById("item10").value
  if (ai1 != ''){
    changeData(id, ai1);
  }
  if (ai2 != ''){
    changeData(id, ai2);
  }
  if (ai3 != ''){
    changeData(id, ai3);
  }
  if (ai4 != ''){
    changeData(id, ai4);
  }
  if (ai5 != ''){
    changeData(id, ai5);
  }
  if (ai6 != ''){
    changeData(id, ai6);
  }
  if (ai7 != ''){
    changeData(id, ai7);
  }
  if (ai8 != ''){
    changeData(id, ai8);
  }
  if (ai9 != ''){
    changeData(id, ai9);
  }
  if (ai10 != ''){
    changeData(id, ai10);
  }
}

function changeData(id, item){
  var csrfToken = document.querySelector("#csrf input").value;
  var pk = id;
  var xhr = new XMLHttpRequest();
  var url = 'http://127.0.0.1:8000/administration/addAgendaItems/';
  xhr.open("POST", url,);
  xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
  xhr.setRequestHeader("Accept", "application/json");
  xhr.setRequestHeader( "X-CSRFToken", csrfToken);
  xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
          var json = JSON.parse(xhr.responseText);
      }
  };
var data = JSON.stringify({"agenda_id": pk, "agendaItem": item,});
xhr.send(data);
}

HTML

{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% block body %}

<style>
  .container{
    display: flex;
    flex-direction: column;
  }
  .agendaitemscontainer{
    display: flex;
    flex-direction: column;
  }
  .formcontainer{
    display: flex;
    max-width: 25%;
  }
  .item{
    margin: 10px;
  }
</style>

<p hidden id = "csrf">{% csrf_token %}</p>

<div class="container">
  <div>
    <h1>Add Agenda Items</h1>
  </div>
  <div class="agendaitemscontainer">
    <div class="item"><textarea rows="2" cols="50" wrap="hard" type="text" id = "item1"></textarea></div>
    <div class="item"><textarea rows="2" cols="50" wrap="hard" type="text" id = "item2"></textarea></div>
    <div class="item"><textarea rows="2" cols="50" wrap="hard" type="text" id = "item3"></textarea></div>
    <div class="item"><textarea rows="2" cols="50" wrap="hard" type="text" id = "item4"></textarea></div>
    <div class="item"><textarea rows="2" cols="50" wrap="hard" type="text" id = "item5"></textarea></div>
    <div class="item"><textarea rows="2" cols="50" wrap="hard" type="text" id = "item6"></textarea></div>
    <div class="item"><textarea rows="2" cols="50" wrap="hard" type="text" id = "item7"></textarea></div>
    <div class="item"><textarea rows="2" cols="50" wrap="hard" type="text" id = "item8"></textarea></div>
    <div class="item"><textarea rows="2" cols="50" wrap="hard" type="text" id = "item9"></textarea></div>
    <div class="item"><textarea rows="2" cols="50" wrap="hard" type="text" id = "item10"></textarea></div>
  </div>
  <div class="formcontainer">
    <form method="post" enctype="multipart/form-data">
      {% csrf_token %}
      {{ form|crispy }}
      <button id = "submitButton" class="btn btn-info ml-2" type="submit" onclick="saveUpdates({{id}})">Save</button>
    </form>
  </div>
</div>
{% load static %}
<script src="{% static 'scripts/addAgendaItems.js' %}"></script>
{% endblock %}
...