ajaxグローバル変数に格納されているデータを表示するには？

Question

ユーザはオプションの1つを選択し、フォームを送信します。

フォームを送信せずにjsonファイルからデータを表示する必要があります。

グローバル変数display_thisにajax呼び出しを保存し、フォームを送信した後に関数としてその変数を呼び出します。

私はオプションを選び、私はこのエラーを取得し提出：私はページを更新すると

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

あなたの機能は、フォーム提出することはできません。 （（）関数{}） `と$外ajaxing機能を移動したり、単にそれをフォームの無名関数を作る;私はこの

これはリターン`リターンresults.html（出力）すべきではない

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