Django: отправка двух ajax-запросов из одной и той же начальной формы

У меня есть форма, сгенерированная в шаблоне, которая вызывает ajax запрос, чтобы сделать вычисления из введенных данных. Все работает нормально.

Вот как выглядит моя установка:

index.html

<form method="POST">
    {% csrf_token %}

    <label><h3>Input variables to calculate EOQ:</h3></label>
    <br>
    <br>


    <span style="color:black">Annual demand <input type="text" id="annual_demand">
    <br>
    <br>
    <span style="color:black">Order cost <input type="text" id="order_cost">
    <br>
    <br>
    <span style="color:black">Unit cost <input type="text" id="unit_cost">
    <br>
    <br>
    <span style="color:black">Holding cost <input type="text" id="holding_cost">
    <br>
    <br>

    <input id="ajax-call" type="submit" value="Calculate EOQ">

</form>

<span style="color:black">Optimal EOQ<fieldset type="text" id="ajax"></fieldset></span> 

и мой views.py выглядит следующим образом:

def index(request):
    return render(request, "index.html")



@csrf_exempt
def compute(request):
    annual_demand = request.POST.get("annual_demand")
    order_cost = request.POST.get("order_cost")
    unit_cost = request.POST.get("unit_cost")
    holding_cost = request.POST.get("holding_cost")
    result = m.sqrt((2*float(annual_demand)*float(order_cost))/(float(unit_cost)*float(holding_cost)))
  
    return JsonResponse({"operation_result": result
                        })

Теперь я пытаюсь добавить второй расчет из входных данных формы, и я не могу успешно достичь этого. Я пробовал включить вычисления внутри представления "compute", но это не работает, я также пробовал генерировать новое представление, так что второй вызов ajax для второго вычисления также не дал результатов.

Вот что я получил:

1. Added a new view for the second call:

@csrf_exempt
def compute2(request):
    annual_demand = request.POST.get("annual_demand")
    order_cost = request.POST.get("order_cost")
    unit_cost = request.POST.get("unit_cost")
    holding_cost = request.POST.get("holding_cost")
    result2 = m.sqrt((2*float(order_cost))/(float(unit_cost)*float(holding_cost)*float(annual_demand)))
    
    return JsonResponse({
                        "operation_results2": result2})

и написание второго js скрипта внутри шаблона для выполнения второго ajax вызова

<script>
  document.querySelector("#ajax-call").addEventListener("click", event => {
      event.preventDefault();
      let formData = new FormData();
      formData.append('annual_demand', document.querySelector("#annual_demand").value);
      formData.append('order_cost', document.querySelector("#order_cost").value);
      formData.append('unit_cost', document.querySelector("#unit_cost").value);
      formData.append('holding_cost', document.querySelector("#holding_cost").value);
      let csrfTokenValue = document.querySelector('[name=csrfmiddlewaretoken]').value;

      const request = new Request('{% url "compute2" %}',{
          method: 'POST',
          body: formData,
          headers: {'X-CSRFToken': csrfTokenValue}
      });
      
      fetch(request)
          .then(response => response.json())
          .then(result => {
              const resultElement = document.querySelector("#ajax2");
        
              
              resultElement.innerHTML = result["operation_result2"];
           

  })
  
  


})


</script>

Похоже, что данные не проходят в оба вызова одновременно. Исходный вызов работает, а новый показывает, что данные не проходят через него.

Я новичок в javascript, и это вызывает у меня проблемы, любая помощь будет высоко оценена!

Вернуться на верх