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 () {}
          });