如何顯示存儲在ajax全局變量中的數據？

Question

用戶選擇其中一個選項並提交表單。

然後沒有提交表單，我需要顯示來自json文件的數據。

我將ajax調用存儲在全局變量display_this中，並在提交表單後將其作爲函數調用。

當我選擇選項，然後按提交我得到這個錯誤：當我刷新頁面

TypeError: display_this is not a function 

，它顯示的數據。

我的代碼：

<form id="form"> 
    <select name="op" id="op"> 
    <option value="A">A</option> 
    <option value="B">B</option> 
    </select> 
    <input value="Submit" type="submit" id="submit"> 
</form> 

我的JSON數據：

[ 
    {"key":"A","val":"apple"}, 
    {"key":"A","val":"orange"}, 
    {"key":"B","val":"carrot"}, 
    {"key":"B","val":"onion"} 
] 

我的jQuery代碼：

$(document).ready(function() { 
    var output; 
    var display_this = function() { 
    var val = $("#op").val(); 

    $.ajax({ 
     async: 'false', 
     type: 'post', 
     url: 'abc.php', 
     data: { 
     "val": val 
     }, 
     dataType: 'json', 
     success: function (response) { 
     var data = JSON.stringify(response); 
     var resp = JSON.parse(data); 

     $.each(resp, function (i, item) { 
      if (val == "A" && resp[i].key == "A") { 
      output += resp[i].val + "</br>"; 
      } else if (val == "B" && resp[i].key == "B") { 
      output += resp[i].val + "</br>"; 
      } 
     }); 
     return results.html(output); 
     } 
    }); 
    }(); 

    $('#form').submit(function (e) { 
    e.preventDefault(); 
    display_this(); 
    }); 
}); 

Answer 1

你的功能是不提供給您的形式提交。我的建議是

$(function() { 
    $('#form').submit(function (e) { 
    e.preventDefault(); 
    var output; 
    var val = $("#op").val(); 

    $.ajax({ 
    // async: 'false', // do NOT use async false 
     type: 'post', 
     url: 'abc.php', 
     data: { 
     "val": val 
     }, 
     dataType: 'json', 
     success: function (resp) { 
     $.each(resp, function (i, item) { 
      if (val == "A" && resp[i].key == "A") { 
      output += resp[i].val + "</br>"; 
      } else if (val == "B" && resp[i].key == "B") { 
      output += resp[i].val + "</br>"; 
      } 
     }); 
     $("#results").html(output); 
     } 
    }); 
    }); 
});