jQuery: Как получить входное значение в вызове ajax?

ProgramBox

jQuery: Как получить входное значение в вызове ajax?

Post author:admin
Запись опубликована:8 января, 2022
Post category:Вопросы по программированию

#javascript #html #jquery

Вопрос:

У меня есть скрипт jQuery, в котором мне нужно загрузить данные из CSV с внешнего URL-адреса.

В то же время мне нужно объединить данные из CSV с данными, предоставленными пользователем интерфейса через поле ввода. Мой ожидаемый результат будет заключаться в том, что я смогу вызвать код jQuery для извлечения значения из ввода пользователя в поле ввода. Однако, хотя это работает, когда код размещается вне вызова ajax, внутри он не работает.

В то же время я не могу разместить код для извлечения пользовательских данных за пределами вызова ajax, так как мне нужно иметь возможность использовать информацию из загруженного CSV вместе с пользовательскими данными для выполнения динамических вычислений.

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

HTML:

 <input type="text" id="my_input" value="12" maxlength="2">

Язык JavaScript:

 $.ajax({
    url: csv_url,
    async: false,
    success: function (csvd) {
      var csv = $.csv.toObjects(csvd);
      // XYZ done with the CSV data to populate various fields

      $("#my_input").keyup(function () {
          console.log(this.value);
          // this does not result in anything being logged
      });
    },
    dataType: "text",
    complete: function () {}
  });

1. $("#my_input").keyup(function создает обработчик событий. Ничто не будет регистрироваться до тех пор, пока пользователь не введет что-либо в поле после завершения запроса Ajax. Ты это имел в виду? Не совсем ясно, каким должен быть поток

2. I can't place the code for fetching the user's input outside the ajax call, as I need to be able to utilize information from the loaded CSV … Ты можешь. Просто поместите данные из CSV в переменную, область действия которой выходит за пределы вызова Ajax

3. Идеальный рабочий процесс был бы следующим: 1) При загрузке страницы CSV-файл загружается вызовом ajax, в результате чего «инструмент» готов к вводу данных пользователем. 2) Затем пользователь может ввести значение в поле ввода. Это значение используется в расчете с переменными из CSV для получения выходных данных, которые отображаются пользователю. 3) Если пользователь затем изменит значение поля ввода, расчет должен быть соответствующим образом обновлен. Я не уверен, что лучшим подходом было бы попытаться вывести область CSV за пределы вызова ajax — или, напротив, расширить значения пользовательского ввода в ajax.

4. Ну, обратный вызов Ajax будет существовать только тогда, когда ответ первоначально вернется с сервера. Если вы не поместите значения в переменную, которая может существовать вне ее, то они не будут доступны для последующего использования, как вы описали.

5. @ADyson Спасибо за разъяснение — в этом случае, я думаю, решение, которое я ищу, заключается в том, как сохранить данные CSV и сделать их доступными за пределами вызова ajax, что, как я полагаю, должно решить мою проблему

Ответ №1:

Конечно, это не сработает. Вы предлагаете компилятору добавить прослушиватель событий keyup для ввода после успешного вызова ajax. Это означает, что он не будет работать до тех пор, пока вызов ajax не будет успешно завершен.

Вам нужно поместить прослушиватель событий keyup снаружи и внутри вызова ajax, просто получите значение, как показано ниже:

 let myInputValue = "";

    $("#my_input").keyup(function () {
        console.log(this.value);
        myInputValue  = this.value;

     });
    
    $.ajax({
        url: csv_url,
        async: false,
        success: function (csvd) {
          var csv = $.csv.toObjects(csvd);
          // XYZ done with the CSV data to populate various fields
    
          //And later use the myInputValue here
        },
        dataType: "text",
        complete: function () {}
      });

Вы не предоставили нам достаточно информации. если вам нужно только текущее значение в вызове ajax, вы можете сделать, как показано ниже:

 $.ajax({
            url: csv_url,
            async: false,
            success: function (csvd) {
              var csv = $.csv.toObjects(csvd);
              // XYZ done with the CSV data to populate various fields
        
              let myInputValue = $("#my_input").val();//And later use the myInputValue here
            },
            dataType: "text",
            complete: function () {}
          });

1. Никогда не используйте async:false . Это ужасная практика, и поставщики браузеров не одобряют ее

2. @charlietfl Я просто скопировал код из вопроса и не проверял, что, поскольку это не была часть, у которой была проблема.

3. Просто указываю на это. Он устарел много лет назад и при использовании выдает предупреждающие сообщения в консоли

4. Теперь я изменил async:false на async:true . Чего я пытаюсь добиться, так это того, чтобы вводимые пользователем данные в поле ввода были доступны в рамках вызова ajax. Я попробовал ваше первое решение выше. Однако здесь я могу регистрировать изменения пользовательского ввода только в инструкции keyup — я не могу регистрировать/использовать обновленное значение myInputValue внутри вызова ajax.

5. @mfcss Я чувствую, что вы задали неправильный вопрос или неправильно понимаете обработчики событий и/или вызовы ajax. Не могли бы вы подробно объяснить, что вы имеете в виду, используя keyup в вызове ajax? сам вызов ajax не может иметь нажатия клавиш или регистрации нажатых клавиш при вызове конечной точки. Как вы сказали, это ВЫЗОВ внешнему источнику.

Метки: jQuery: Как получить входное значение в вызове ajax?