Несколько поочередных запросов на ajax

Question

Я новичок в JS и JQuery, возникла необходимость делать запросы к базе данных, худо-бедно нашел код, который работает у меня, но проблема в том, что код делает правильно только один запрос, а мне необходимо сделать пару последовательных запросов на разные страницы.
Второй запрос должен использовать данные из первого запроса. В первом запросе ответом придет что-то типа `Видимые данные`.
**Необходимо для второго запроса взять значение value из первого ответа и отослать его дальше на другую страницу.**
После подобным образом вывести в документ.
Ниже мой код, он отсылает 2 запроса как мне и нужно, но во втором запросе он отсылает дословно `?group_id=`, необходимо `?group_id=1 или ?group_id=2`

$("#client").change(function() {

  var url = $("#indexForm").attr("data-tgetc");
  var company_id = $(this).val();

  $.ajax({
    url: url,
    data: {
      'company_id': company_id
    },

    success: function(data) {
      $("#company").html(data);

      //начало 2 запроса
      $("#company").ready(function() {
        var url = $("#indexForm").attr("data-tget");
        var group_id = $(this).val();
        $.ajax({
          url: url,
          data: {
            'group_id': group_id
          },
          success: function(data) {
            $("#groupcomp").html(data);
          }
        });

      });
      //конец 2 запроса
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container" style="margin-top:50px">
  <h2 class="text-center">Antony CRM</h2>
  <br><br>
  <form method="post" id="indexForm" data-tgetc="{% url 'tgetc' %}" data-tget="{% url 'tget' %}">
    {% csrf_token %}
    <label>Client</label>
    <select name="client" id="client" class="form-control mb-4">
      <option value="" id="remove">Сделай выбор</option>
      {% for i in clientss %}
      <option value="{{i.company_id}}">{{i.client}}</option>
      {% endfor %}
    </select>

    <label>Company</label>
    <div id="company" class="form-control">

    </div>
    <br>

    <label>Group of Company</label>
    <div id="groupcomp" class="form-control">

    </div>

    <br>
    <input type="submit" value="Submit" class="form-control btn btn-primary">
  </form>
</div>

Answer 1

А зачем вы данные из первого запроса тащите в html? Просто чтобы в следующей строке их оттуда достать? Вы получили данные из первого запроса ну и отправляйте сразу второй.

$("#client").change(function() {
  const url = $("#indexForm").attr("data-tgetc");
  const company_id = $(this).val();

  $.ajax({
    url: url,
    data: {
      company_id,
    },
    success: function(group_id) {
      console.log('Ура! Данные из первого запроса:', group_id);
      $.ajax({
        url: url,
        data: {
          group_id,
        },
        success: function(data) {
          console.log('Ура! Данные из второго запроса:', data);
        }
      });
    }
  });
});

Если и этот скрипт отправит пустой grop_id, то посмотрите консоль, возможно вам из первого запроса что-то не то приходит.

БЛОГ НА HUSL

Несколько поочередных запросов на ajax

Ответы (1 шт):