如何显示存储在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); 
     } 
    }); 
    }); 
});