jQuery：如何在 ajax 调用中获取输入值？

Question

我有一个 jQuery 脚本，我需要在其中从外部 URL 加载来自 CSV 的数据。

同时，我需要将来自 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 () {}
  });

Answer 1

当然是行不通的。 您是在告诉编译器在 ajax 调用成功后将 keyup 事件侦听器添加到 input 中。 这意味着在 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 () {}
          });