Как сделать поочередный ajax запрос?

Question

[delongeroman]

Добрый день.
В JQuery как и в JS я новичок, поэтому, вопрос самостоятельно решить не смог.
У меня есть селекты, при изменении отправляется запрос с параметром, ответ подставляется в нужное поле.
Как мне отправить 2 поочередных запроса, то есть, когда первый запрос придет и код появится в html, необходимо будет выполнить второй запрос, на основании тех данных, которые пришли от 1 запроса?

<select name="client" id="client" class="form-control mb-4">
            <option value="" id="remove">Сделай выбор</option> 
            {% for i in clientss %} <!-- цикл для вывода option -->
            <option value="{{i.company_id}}">{{i.client}}</option>
            {% endfor %} <!-- конец цикла -->
        </select>

        <label>Company</label>
        <div id="company" class="form-control">
       <!-- сюда приходит ответ в формате <option value="необходимый айди,
который вставляется в параметр запроса">Имя компании</option> -->
        </div>
        <br>

        <label>Group of Company</label>
        <div id="groupcomp" class="form-control">
       <!-- сюда должен прийти ответ от 2 запроса -->
        </div>

$("#client").change(function () {
      var url = $("#indexForm").attr("data-tgetc");  // get the url of the `yourpath` view
      var company_id = $(this).val();  // get the selected company ID from the HTML input
      $.ajax({                       // initialize an AJAX request
        url: url,                    // set the url of the request (= localhost:8000/path/)
        data: {
          'company_id': company_id       // add the programming id to the GET parameters
        },

        success: function (data) {  // `data` is the return of the `path` view function
          $("#company").html(data);  // replace the contents of the course input with the data that came from the server
          }
      });

Upd. Вопрос решен.

Answer 1

[Fenix957]

$.ajax({ // initialize an AJAX request
url: url, // set the url of the request (= localhost:8000/path/)
data: {
'company_id': company_id // add the programming id to the GET parameters
},

success: function (data) { // `data` is the return of the `path` view function
$("#company").html(data); // replace the contents of the course input with the data that came from the server
$.ajax({ // initialize an AJAX request
url: url, // set the url of the request (= localhost:8000/path/)
data: {
'company_id': company_id // add the programming id to the GET parameters
},

success: function (data) { // `data` is the return of the `path` view function
$("#company2").html(data); // replace the contents of the course input with the data that came from the server
}
});
}
});

Comments

[delongeroman]

Думаю это ближе к моему ответу, но у меня запросы идут на разные страницы, и второй запрос должен начинаться с того, что я беру данные из первого запроса и дальше перенаправляю их на вторую страницу, чтобы найти совпадение и вывести необходимую информацию. Должно быть что-то типа такого

$("#client").change(function () {
      var url = $("#indexForm").attr("data-tgetc");  // get the url of the `yourpath` view
      var company_id = $(this).val();  // get the selected company ID from the HTML input
      $.ajax({                       // initialize an AJAX request
        url: url,                    // set the url of the request (= localhost:8000/path/)
        data: {
          'company_id': company_id       // add the programming id to the GET parameters
        },

        success: function (data) {  // `data` is the return of the `path` view function
          $("#company").html(data); // replace the contents of the course input with the data that came from the server

          $("#company").ready(function () {
      var url = $("#indexForm").attr("data-tget");  // get the url of the `yourpath` view
      var group_id = $(this).val();  // get the selected company ID from the HTML input
      $.ajax({                       // initialize an AJAX request
        url: url,                    // set the url of the request (= localhost:8000/path/)
        data: {
          'group_id': group_id      // add the programming id to the GET parameters
        },

        success: function (data) {  // `data` is the return of the `path` view function
          $("#groupcomp").html(data); // replace the contents of the course input with the data that came from the server




           } //success end
        }); //ajax end
      });


           } //success end
        }); //ajax end
      }); //script end

Тут я пытаюсь взять то, что пришло, приходит в таком виде

<option value="необходимый параметр">Какие-то видимые данные</option>

И мне нужно либо сохранить первый ответ и дальше его прогнать на другую страницу, либо взять то что вставилось в html и сделать по подобию первого запроса. С этим скриптом на 2 запросе у меня отсылается на сервер:
?group_id=, а должно быть что-то типа ?group_id=1 или ?group_id=2

[Fenix957]

delongeroman, непоймите не правильно, но ваш вопрос очень тривиален, почитайте документацию по ajax.
Параметр url отвечает куда делать запрос так поменяйте его на то что вам нужно
параметр data отвечает за параметры запроса

[delongeroman]

Fenix957, я уже разобрался немного. Не могу взять элемент, созданный после 1 запроса. Он мне возвращает пустоту(group_id), хотя когда выполняется первый запрос, я подставляю туда

$("#company").ready(function () {
      var url = $("#indexForm").attr("data-tget");  // get the url of the `yourpath` view
      var group_id = $(this).val();

Answer 2

[DaBags]

Используйте параметр async: false
https://jquery-docs.ru/jQuery.ajax/

Comments

[alekssamos]

Очень хороший ответ (нет). В новых браузерах от него избавляются, это раз, приведёт к зависанию, это два, лучше использовать тот же fatch вместе с await это три.