{"id":1150,"date":"2021-03-17T15:05:24","date_gmt":"2021-03-17T06:05:24","guid":{"rendered":"https:\/\/www.opentone.co.jp\/ot-lab\/?p=1150"},"modified":"2025-05-12T10:06:18","modified_gmt":"2025-05-12T01:06:18","slug":"ajax-spring","status":"publish","type":"post","link":"https:\/\/www.opentone.co.jp\/ot-lab\/all\/web-system\/ajax-spring","title":{"rendered":"Ajax\u3068Spring\u3067\u753b\u9762\u9077\u79fb\u305b\u305a\u306b\u30c7\u30fc\u30bf\u53d6\u5f97"},"content":{"rendered":"\n<p>\u3053\u3093\u306b\u3061\u306f\u3001kk\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u4eca\u56de\u306fAjax\u3092\u5229\u7528\u3057\u3066\u3001\u753b\u9762\u9077\u79fb\u306a\u3057\u3067\u30b5\u30fc\u30d0\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3066\u753b\u9762\u306b\u8868\u793a\u3057\u3066\u307f\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<br>\u524d\u56de\u4f5c\u6210\u3057\u305fSpringMVC\u306e\u30b5\u30f3\u30d7\u30eb\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u30d9\u30fc\u30b9\u306b\u3057\u307e\u3059\u3002<br>\u2192<a href=\"http:\/\/labs.opentone.co.jp\/?p=6000\" target=\"_blank\" rel=\"noreferrer noopener\">SpringIDE\u3067\u59cb\u3081\u308bSpringMVC\u30d7\u30ed\u30b8\u30a7\u30af\u30c8<\/a><br>Ajax\u306b\u3064\u3044\u3066\u306f\u4eca\u56dejQuery\u3092\u5229\u7528\u3059\u308b\u305f\u3081\u3001\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u8ffd\u52a0\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Jackson\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u8ffd\u52a0<\/h2>\n\n\n\n<p>\u30b5\u30fc\u30d0\u304b\u3089\u306e\u30c7\u30fc\u30bf\u8fd4\u5374\u306bJSON\u3092\u4f7f\u7528\u3059\u308b\u305f\u3081\u3001Jackson\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u5229\u7528\u3057\u307e\u3059\u3002<br>Maven\u306b\u4e0b\u8a18\u3092\u8ffd\u52a0\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>pom.xml<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">[sourcecode]\n&lt;dependency&gt;\n\t&lt;groupId&gt;com.fasterxml.jackson.core&lt;\/groupId&gt;\n\t&lt;artifactId&gt;jackson-databind&lt;\/artifactId&gt;\n\t&lt;version&gt;2.4.4&lt;\/version&gt;\n&lt;\/dependency&gt;\n[\/sourcecode]<\/pre>\n\n\n\n<p>\u3059\u308b\u3068\u3001\u95a2\u9023\u3059\u308b\u30e9\u30a4\u30d6\u30e9\u30ea\u3082\u4e00\u7dd2\u306b\u5f15\u3063\u5f35\u3063\u3066\u304d\u3066\u304f\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u30b5\u30fc\u30d0\u5074\u306e\u51e6\u7406<\/h2>\n\n\n\n<p>\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u4f5c\u6210\u3055\u308c\u3066\u3044\u308b\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u306b\u3001\u4e0b\u8a18\u30e1\u30bd\u30c3\u30c9\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<br>\u914d\u5217\u306e\u30c7\u30fc\u30bf\u3092\u8fd4\u3059\u5358\u7d14\u306a\u3082\u306e\u3067\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>HomeController.java<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">[sourcecode language=\"java\"]\n\t\/**\n\t * \u30c6\u30b9\u30c8\u30c7\u30fc\u30bf\u306e\u914d\u5217\u3092\u8fd4\u5374\u3059\u308b\u3002\n\t *\/\n\t@RequestMapping(value = \"getTestData\", method = RequestMethod.GET)\n\t@ResponseBody\n\tpublic String[] getTestData() {\n\n\t\tlogger.info(\"call getTestData\");\n\t\tString[] datas = {\"test1\", \"test2\", \"test3\"};\n\n\t\treturn datas;\n\t}\n[\/sourcecode]<\/pre>\n\n\n\n<p>Spring\u306e\u6a5f\u80fd\u306b\u3088\u308a\u3001\u30e1\u30bd\u30c3\u30c9\u306bResponseBody\u30a2\u30ce\u30c6\u30fc\u30b7\u30e7\u30f3\uff085\u884c\u76ee\uff09\u3092\u4ed8\u3051\u308b\u3053\u3068\u3067\u3001\u30ea\u30af\u30a8\u30b9\u30c8\u7d50\u679c\u3092JSON\u5f62\u5f0f\u3067\u8fd4\u5374\u3059\u308b\u3053\u3068\u304c\u51fa\u6765\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u753b\u9762\uff08JSP\uff09\u5074\u306e\u51e6\u7406<\/h2>\n\n\n\n<p>\u30dc\u30bf\u30f3\u30af\u30ea\u30c3\u30af\u6642\u306b\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u9001\u4fe1\u3057\u3066\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u307e\u3059\u3002<br>url\u306b\u306f\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u306e\u30ea\u30af\u30a8\u30b9\u30c8\u30de\u30c3\u30d4\u30f3\u30b0\u3068\u5408\u3046\u3088\u3046\u306b\u30d1\u30b9\u3092\u8a18\u8f09\u3057\u307e\u3059\u3002<br>\u6210\u529f\u6642\u306b\u3001\u53d6\u5f97\u3057\u305f\u30c7\u30fc\u30bf\u3092html\u306b\u51fa\u529b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>home.jsp\uff08javascript\u90e8\u5206\uff09<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">[sourcecode language=\"javascript\"]\n&lt;script type=\"text\/javascript\"&gt;\n$(function() {\n\t\/\/ Ajax\u901a\u4fe1\u30c6\u30b9\u30c8 \u30dc\u30bf\u30f3\u30af\u30ea\u30c3\u30af\n\t$(\"#ajax_btn\").click(function() {\n\t\t\/\/ outputData\u3092\u7a7a\u306b\u521d\u671f\u5316\n\t\t$(\"#output_data\").text(\"\");\n\t\t$.ajax({\n\t\t\ttype\t\t: \"GET\",\n\t\t\turl\t\t\t: \"getTestData\",\n\t\t\tdataType\t: \"json\",\n\t\t\tsuccess\t\t: function(data) {\n\t\t\t\t\t\t\tsuccess(data);\n\t\t\t\t\t\t},\n\t\t\terror\t\t: function(XMLHttpRequest, textStatus, errorThrown) {\n\t\t\t\t\t\t\terror(XMLHttpRequest, textStatus, errorThrown);\n\t\t\t\t\t\t}\n\t\t});\n\t});\n});\n\n\/\/ Ajax\u901a\u4fe1\u6210\u529f\u6642\u51e6\u7406\nfunction success(data) {\n\talert(\"success:\" + data);\n\n\t$(\"#output_data\").text(\"\");\n\tfor (var cnt = 0; cnt &lt; data.length; cnt++) {\n\t\t$(\"#output_data\").append(\"data[\" + cnt + \"]\uff1a\" + data[cnt] + \"\uff1b\");\n\t}\n}\n\n\/\/ Ajax\u901a\u4fe1\u5931\u6557\u6642\u51e6\u7406\nfunction error(XMLHttpRequest, textStatus, errorThrown) {\n\talert(\"error:\" + XMLHttpRequest);\n\talert(\"status:\" + textStatus);\n\talert(\"errorThrown:\" + errorThrown);\n}\n&lt;\/script&gt;\n[\/sourcecode]<\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>home.jsp\uff08html\u90e8\u5206\uff09<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">[sourcecode language=\"html\"]\n&lt;body&gt;\n&lt;h1&gt;\n\tHello world!\n&lt;\/h1&gt;\n\n&lt;P&gt;  The time on the server is ${serverTime}. &lt;\/P&gt;\n\n&lt;div id=\"ajax_data\"&gt;\n\t&lt;input type=\"button\" id=\"ajax_btn\" value=\"Ajax\u901a\u4fe1\u30c6\u30b9\u30c8\" \/&gt;&lt;br \/&gt;\n\toutputData\uff1a&lt;span id=\"output_data\"&gt;&lt;\/span&gt;\n&lt;\/div&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n[\/sourcecode]<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u5b9f\u884c\u3057\u3066\u307f\u308b<\/h2>\n\n\n\n<p>\u307e\u305a\u306f\u30da\u30fc\u30b8\u306b\u30a2\u30af\u30bb\u30b9\u3002<br>\u73fe\u5728\u6642\u523b\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"300\" height=\"179\" src=\"https:\/\/www.opentone.co.jp\/ot-lab\/wp-content\/uploads\/sites\/11\/2021\/03\/6144001-300x179-1.png\" alt=\"\" class=\"wp-image-1151\" \/><\/figure>\n\n\n\n<p>\u6b21\u306b\u30dc\u30bf\u30f3\u30af\u30ea\u30c3\u30af\u3067\u30ea\u30af\u30a8\u30b9\u30c8\u9001\u4fe1\u3002<br>\u30b5\u30fc\u30d0\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3066html\u3078\u8868\u793a\u3057\u307e\u3059\u3002<br>\u6642\u523b\u3092\u898b\u308b\u3068\u3001\u5909\u308f\u3063\u3066\u3044\u306a\u3044\uff08=\u753b\u9762\u9077\u79fb\u3057\u3066\u3044\u306a\u3044\uff09\u3053\u3068\u304c\u5206\u304b\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"300\" height=\"179\" src=\"https:\/\/www.opentone.co.jp\/ot-lab\/wp-content\/uploads\/sites\/11\/2021\/03\/6144002-300x179-1.png\" alt=\"\" class=\"wp-image-1152\" \/><\/figure>\n\n\n\n<p>\u5982\u4f55\u3067\u3057\u305f\u3067\u3057\u3087\u3046\u3002<br>\u5358\u7d14\u306a\u3082\u306e\u306a\u3089\u7d50\u69cb\u7c21\u5358\u306b\u5b9f\u73fe\u51fa\u6765\u305f\u3068\u601d\u3044\u307e\u3059\u3002&nbsp;<\/p>\n<div class=\"opent-_2\" style=\"margin-top: 10px;margin-right: 10px;margin-bottom: 10px;margin-left: 10px;\" id=\"opent-1938086423\"><a href=\"https:\/\/www.opentone.co.jp\/backlog\/\" aria-label=\"twitter_backlogskt_new\"><img src=\"https:\/\/www.opentone.co.jp\/ot-lab\/wp-content\/uploads\/sites\/11\/2023\/02\/twitter_backlogskt_new.jpg\" alt=\"\"  srcset=\"https:\/\/www.opentone.co.jp\/ot-lab\/wp-content\/uploads\/sites\/11\/2023\/02\/twitter_backlogskt_new.jpg 1024w, https:\/\/www.opentone.co.jp\/ot-lab\/wp-content\/uploads\/sites\/11\/2023\/02\/twitter_backlogskt_new-300x157.jpg 300w, https:\/\/www.opentone.co.jp\/ot-lab\/wp-content\/uploads\/sites\/11\/2023\/02\/twitter_backlogskt_new-768x401.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" width=\"384\" height=\"200\"   \/><\/a><\/div>","protected":false},"excerpt":{"rendered":"<p>\u3053\u3093\u306b\u3061\u306f\u3001kk\u3067\u3059\u3002 \u4eca\u56de\u306fAjax\u3092\u5229\u7528\u3057\u3066\u3001\u753b\u9762\u9077\u79fb\u306a\u3057\u3067\u30b5\u30fc\u30d0\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3066\u753b\u9762\u306b\u8868\u793a<\/p>\n","protected":false},"author":1,"featured_media":1151,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[28],"tags":[],"class_list":["post-1150","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-system",""],"acf":[],"aioseo_notices":[],"uagb_featured_image_src":{"full":["https:\/\/www.opentone.co.jp\/ot-lab\/wp-content\/uploads\/sites\/11\/2021\/03\/6144001-300x179-1.png",300,179,false],"thumbnail":["https:\/\/www.opentone.co.jp\/ot-lab\/wp-content\/uploads\/sites\/11\/2021\/03\/6144001-300x179-1-150x150.png",150,150,true],"medium":["https:\/\/www.opentone.co.jp\/ot-lab\/wp-content\/uploads\/sites\/11\/2021\/03\/6144001-300x179-1.png",300,179,false],"medium_large":["https:\/\/www.opentone.co.jp\/ot-lab\/wp-content\/uploads\/sites\/11\/2021\/03\/6144001-300x179-1.png",300,179,false],"large":["https:\/\/www.opentone.co.jp\/ot-lab\/wp-content\/uploads\/sites\/11\/2021\/03\/6144001-300x179-1.png",300,179,false],"1536x1536":["https:\/\/www.opentone.co.jp\/ot-lab\/wp-content\/uploads\/sites\/11\/2021\/03\/6144001-300x179-1.png",300,179,false],"2048x2048":["https:\/\/www.opentone.co.jp\/ot-lab\/wp-content\/uploads\/sites\/11\/2021\/03\/6144001-300x179-1.png",300,179,false],"engage-mag-carousel-img":["https:\/\/www.opentone.co.jp\/ot-lab\/wp-content\/uploads\/sites\/11\/2021\/03\/6144001-300x179-1.png",300,179,false],"engage-mag-carousel-img-landscape":["https:\/\/www.opentone.co.jp\/ot-lab\/wp-content\/uploads\/sites\/11\/2021\/03\/6144001-300x179-1.png",300,179,false],"engage-mag-carousel-large-img":["https:\/\/www.opentone.co.jp\/ot-lab\/wp-content\/uploads\/sites\/11\/2021\/03\/6144001-300x179-1.png",300,179,false],"engage-mag-carousel-large-img-landscape":["https:\/\/www.opentone.co.jp\/ot-lab\/wp-content\/uploads\/sites\/11\/2021\/03\/6144001-300x179-1.png",300,179,false],"engage-mag-large-thumb":["https:\/\/www.opentone.co.jp\/ot-lab\/wp-content\/uploads\/sites\/11\/2021\/03\/6144001-300x179-1.png",300,179,false],"engage-mag-small-thumb":["https:\/\/www.opentone.co.jp\/ot-lab\/wp-content\/uploads\/sites\/11\/2021\/03\/6144001-300x179-1.png",300,179,false]},"uagb_author_info":{"display_name":"ah106rx4o4","author_link":"https:\/\/www.opentone.co.jp\/ot-lab\/author\/ah106rx4o4"},"uagb_comment_info":0,"uagb_excerpt":"\u3053\u3093\u306b\u3061\u306f\u3001kk\u3067\u3059\u3002 \u4eca\u56de\u306fAjax\u3092\u5229\u7528\u3057\u3066\u3001\u753b\u9762\u9077\u79fb\u306a\u3057\u3067\u30b5\u30fc\u30d0\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3066\u753b\u9762\u306b\u8868\u793a","_links":{"self":[{"href":"https:\/\/www.opentone.co.jp\/ot-lab\/wp-json\/wp\/v2\/posts\/1150","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.opentone.co.jp\/ot-lab\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.opentone.co.jp\/ot-lab\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.opentone.co.jp\/ot-lab\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.opentone.co.jp\/ot-lab\/wp-json\/wp\/v2\/comments?post=1150"}],"version-history":[{"count":1,"href":"https:\/\/www.opentone.co.jp\/ot-lab\/wp-json\/wp\/v2\/posts\/1150\/revisions"}],"predecessor-version":[{"id":1153,"href":"https:\/\/www.opentone.co.jp\/ot-lab\/wp-json\/wp\/v2\/posts\/1150\/revisions\/1153"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.opentone.co.jp\/ot-lab\/wp-json\/wp\/v2\/media\/1151"}],"wp:attachment":[{"href":"https:\/\/www.opentone.co.jp\/ot-lab\/wp-json\/wp\/v2\/media?parent=1150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.opentone.co.jp\/ot-lab\/wp-json\/wp\/v2\/categories?post=1150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.opentone.co.jp\/ot-lab\/wp-json\/wp\/v2\/tags?post=1150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}