\u3063\u3066\u306a\u308b\u3053\u3068\u3082\u3042\u308b\u3093\u3058\u3083\u306a\u3044\u3067\u3057\u3087\u3046\u304b\u3002<\/p>\n
\u3068\u3044\u3046\u306e\u3082\u3001\u958b\u767a\u306e\u4e16\u754c\u306f\u65b0\u3057\u3044\u3082\u306e\u304c\u5e38\u306b\u767b\u5834\u3057\u307e\u3059\u3057\u3001\u30b9\u30d4\u30fc\u30c9\u3082\u65e9\u3044\u306e\u3067\u30c1\u30a7\u30c3\u30af\u304c\u6f0f\u308c\u3066\u3057\u307e\u3063\u3066\u3044\u308b\u30c6\u30af\u30ce\u30ed\u30b8\u30fc\u304c\u51fa\u3066\u304f\u308b\u306e\u3082\u5f53\u7136\u3068\u8a00\u3048\u3070\u5f53\u7136\u306a\u3053\u3068\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/strong><\/p>\n \u305d\u3057\u3066\u3001\u4eca\u56de\u3054\u7d39\u4ecb\u3057\u305f\u3044\u306e\u304c\u3001\u307e\u3055\u306b\uff11\u5e74\u307b\u3069\u524d\u306b\u300c\u3053\u308c\u306f\u77e5\u3089\u306a\u304b\u3063\u305f\u2757\u300d\u3068\u306a\u3063\u305f \u79c1\u306e\u5834\u5408\u3001Ajax\u901a\u4fe1\u306f \u305d\u3053\u3067\uff01<\/p>\n \u4eca\u56de\u306f \u300c \u3067\u306f\u3001 \u5b9f\u306f\u3053\u306e\u5834\u5408\u3001\uff11\u3064\u76ee\u306e \u305d\u306e\u305f\u3081\u3001\u4e00\u65e6 \u307e\u305f\u3001Ajax\u901a\u4fe1\u3084 \u203b\u306a\u304a\u3001 \u4f8b\u3048\u3070 \u5404\u30d6\u30ed\u30c3\u30af\u306e\u8aac\u660e\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n \u2460\u30e1\u30bd\u30c3\u30c9<\/strong><\/p>\n \u3053\u306e\u90e8\u5206\u306f\u3001\u6b21\u306e\u3088\u3046\u306a\u9001\u4fe1\u30bf\u30a4\u30d7\u3092\u6307\u5b9a\u3059\u308b\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n \u2461\u30c7\u30fc\u30bf\u5f62\u5f0f\u3001\u2462\u9001\u4fe1\u30c7\u30fc\u30bf<\/strong><\/p>\n \u307e\u305a\u3001\u6c7a\u307e\u308a\u3054\u3068\u3068\u3057\u3066\u3001\u2461\u30c7\u30fc\u30bf\u5f62\u5f0f\u3068\u2462\u9001\u4fe1\u30c7\u30fc\u30bf\u306f\u4e00\u81f4\u3055\u305b\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/strong><\/p>\n \u4f8b\u3048\u3070\u3001\u4eca\u56de\u306e\u4f8b\u306fJSON\u5f62\u5f0f\u3067\u306e\u30c7\u30fc\u30bf\u9001\u4fe1\u306a\u306e\u3067\u3001 \u203b\u30d5\u30a1\u30a4\u30eb\u9001\u4fe1\u3059\u308b\u65b9\u6cd5\u306f\u6b21\u306e\u9805\u76ee\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<\/p>\n \u6b21\u306b\u30d5\u30a1\u30a4\u30eb\u3092\u9001\u4fe1\u3059\u308b\u5834\u5408\u3092\u898b\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002 \u3053\u306e\u5834\u5408\u3001\u9001\u4fe1\u30c7\u30fc\u30bf\u306f \u3068\u3044\u3046\u3053\u3068\u3067\u3001\u4eca\u56de\u306f\u7d14\u7c8b\u306a \u5192\u982d\u3067\u3082\u66f8\u3044\u305f\u3068\u304a\u308a\u3001\u7279\u306b\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u8aad\u307f\u8fbc\u307e\u306a\u304f\u3066\u3082\u4f7f\u3048\u308b\u306e\u306f\u5927\u304d\u306a\u30e1\u30ea\u30c3\u30c8\u306a\u3093\u3058\u3083\u306a\u3044\u3067\u3057\u3087\u3046\u304b\u3002<\/p>\n \u305f\u3060\u3001\u30b3\u30fc\u30c9\u3092\u898b\u3066\u3082\u3089\u3063\u305f\u3089\u5206\u304b\u308b\u3068\u304a\u308a\u3001 \u3068\u3044\u3046\u306e\u3082 \u3068\u306f\u3044\u3048\u3001\u65b0\u3057\u3044 \u305c\u3072\u4e00\u5ea6\u4f7f\u3063\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u306d\u3002<\/p>\n \u3067\u306f\u3067\u306f\u301c\u2757<\/p>\n \u300c\u79c1\u306e\u958b\u767a\u3067\u306f\u3001\u307e\u3060\u307e\u3060<\/strong> \u3055\u3066\u3055\u3066\u3001\u3053\u308c\u306f\u958b\u767a\u8005\u306e\u65b9\u306a\u3089\u300c\u3042\u308b\u3042\u308b\u300d\u306a\u8a71\u3060\u3068\u601d\u3046\u306e\u3067\u3059\u304c\u3001\u305f\u307e\u306b\u5168\u304f\u5225\u306e\u8abf\u3079\u3082\u306e\u3092\u3057\u3066\u3044\u3066\u3001 \u300c\u3048\u3063\u3001\u3053\u3093\u306a\u3084\u308a\u65b9\u304c\u3042\u308b\u306e\u2757\u2753\u300d \u3063\u3066\u306a\u308b\u3053\u3068\u3082\u3042\u308b\u3093\u3058\u3083 … <\/p>\nfetch API<\/code>\u3067\u3059\u3002<\/p>\nfetch API<\/code>\u3068\u3044\u3046\u306e\u306f\u3001\u7c21\u5358\u306b\u8a00\u3046\u3068\u300cAjax\u901a\u4fe1\u300d\u3059\u308b\u305f\u3081\u306b\u7528\u610f\u3055\u308c\u305f\u3082\u306e\u3067IE<\/code>\u3092\u9664\u304f\u307b\u307c\u3059\u3079\u3066\u306e\u30d6\u30e9\u30a6\u30b6\u3067\u6709\u52b9\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/strong><\/p>\naxios<\/code>\u3070\u304b\u308a\u4f7f\u3063\u3066\u3044\u305f\u306e\u3067\u3059\u304c\u3001fetch API<\/code>\u306f\u7d14\u7c8b\u306aJavaScript<\/code>\u306e\u6a5f\u80fd\u306a\u306e\u3067\u3001<script><\/code>\u30bf\u30b0\u3067\u30b3\u30fc\u30c9\u3092\u8aad\u307f\u8fbc\u3080\u5fc5\u8981\u304c\u306a\u3044\u306e\u304c\u30e1\u30ea\u30c3\u30c8\u3067\u3059\u3002<\/p>\nfetch API<\/code>\u306e\u57fa\u672c\u7684\u306a\u4f7f\u3044\u65b9\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002
\n\u305c\u3072\u697d\u3057\u307f\u306a\u304c\u3089\u307f\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u2757<\/p>\n![\"\"](\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2019\/04\/no_1.png\")
<\/p>\n$.ajax()<\/code>\u3063\u3066\u66f8\u3044\u3066\u305f\u9803\u304c\u61d0\u304b\u3057\u3044\u30fb\u30fb\u30fb\ud83d\ude02\u300d<\/strong><\/p>\n\u57fa\u672c\u7684\u306a\u4f7f\u3044\u65b9\uff08GET\uff09<\/h1>\n
fetch<\/code>\u306e\u57fa\u672c\u7684\u306a\u4f7f\u3044\u65b9\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002
\n\u6b21\u306e\u4f8b\u3092\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u2757<\/p>\nfetch('https:\/\/jsonplaceholder.typicode.com\/posts')<\/strong>\r\n .then(response => {<\/strong>\r\n\r\n return response.json(); <\/strong>\/\/ \ud83d\udc48 Promise\u3092\u8fd4\u3059\r\n\r\n })<\/strong>\r\n .then(data => {<\/strong> \/\/ \ud83d\udc48 JSON\u30c7\u30fc\u30bf\r\n\r\n console.log(data);<\/strong>\r\n\r\n })<\/strong>\r\n .catch(error => {<\/strong> \/\/ \ud83d\udc48 \u30a8\u30e9\u30fc\u306e\u5834\u5408\r\n\r\n console.log(error);<\/strong>\r\n\r\n });<\/strong><\/pre>\naxios<\/code>\u306b\u6163\u308c\u3066\u3044\u308b\u4eba\u3060\u3068\u3001\u300c\u3042\u308c\u3063\u2753\u2753\u300d\u3068\u601d\u3046\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u304c\u3001then<\/code>\u304c\uff12\u3064\u3042\u308b\u306e\u306f\u3001JSON\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u305f\u3081\u306e\u6b63\u3057\u3044\u3084\u308a\u65b9\u3067\u3059\u3002<\/strong><\/p>\nthen()<\/code>\u3067\u306fJSON\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u3053\u3068\u306f\u3067\u304d\u307e\u305b\u3093\u3002\u306a\u305c\u306a\u3089response.json()<\/code>\u306fPromise<\/code>\u3060\u304b\u3089\u3067\u3059\u3002<\/p>\nreturn<\/code>\u3067\u5024\u3092\u8fd4\u3057\u3066\u304a\u304d\u3001\uff12\u3064\u76ee\u306ethen()<\/code>\u3067\u3084\u3063\u3068JSON<\/code>\u30c7\u30fc\u30bf\u304c\u53d6\u5f97\u3067\u304d\u308b\u6d41\u308c\u306b\u306a\u308a\u307e\u3059\u3002<\/strong><\/p>\nthen()<\/code>\u3067\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u305f\u3089\u3001catch()<\/code>\u304c\u5b9f\u884c\u3055\u308c\u308b\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\nasync<\/code>\u3068await<\/code>\u3092\u4f7f\u3046\u3068\u6b21\u306e\u3088\u3046\u306b\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n(async () => {<\/strong>\r\n\r\n const response = await fetch('https:\/\/jsonplaceholder.typicode.com\/posts');<\/strong>\r\n\r\n if(response.ok) {<\/strong>\r\n\r\n const data = await response.json(); <\/strong>\/\/ \ud83d\udc48 JSON\u30c7\u30fc\u30bf\r\n\r\n }<\/strong>\r\n\r\n})();<\/strong><\/pre>\n\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u3092\u9001\u4fe1\u3059\u308b\uff08POST, PUT, PATCH, DELETE\uff09<\/h1>\n
Ajax<\/code>\u3067POST\u9001\u4fe1\u3057\u305f\u3044\u5834\u5408\u3067\u3059\u3002
\n\u307e\u305a\u4f8b\u3092\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n\/\/ \ud83d\udc47 \u9001\u4fe1\u30c7\u30fc\u30bf\r\nconst data = {\r\n keyword: '\u30ad\u30fc\u30ef\u30fc\u30c9',\r\n orderBy: ['created_at', 'desc']\r\n};\r\n\r\nfetch('https:\/\/jsonplaceholder.typicode.com\/posts', {<\/strong>\r\n method: 'POST',<\/strong> \/\/ \ud83d\udc48 \u30e1\u30bd\u30c3\u30c9 \u30fb\u30fb\u30fb \u2460\r\n headers: {<\/strong>\r\n 'Content-Type': 'application\/json',<\/strong> \/\/ \ud83d\udc48 \u30c7\u30fc\u30bf\u5f62\u5f0f \u30fb\u30fb\u30fb \u2461\r\n },<\/strong>\r\n body: JSON.stringify(data)<\/strong> \/\/ \ud83d\udc48 \u9001\u4fe1\u30c7\u30fc\u30bf \u30fb\u30fb\u30fb \u2462\r\n })<\/strong>\r\n .then(response => response.json())<\/strong>\r\n .then(data => {<\/strong>\r\n\r\n console.log(data);<\/strong>\r\n\r\n })<\/strong>\r\n .catch(error => {<\/strong>\r\n\r\n console.log(error);<\/strong>\r\n\r\n });<\/strong><\/pre>\n\n
application\/json<\/code>\u3092\u4f7f\u3063\u3066\u3044\u307e\u3059\u304c\u3001\u30d5\u30a1\u30a4\u30eb\u9001\u4fe1\u306e\u5834\u5408\u306f\u3001application\/x-www-form-urlencoded<\/code>\u3092\u4f7f\u3044\u307e\u3059\u3002<\/strong><\/p>\n\u30d5\u30a1\u30a4\u30eb\u3092\u9001\u4fe1\u3059\u308b<\/h1>\n
\n\u4f8b\u3048\u3070\u3001\u6b21\u306e\u3088\u3046\u306a\u30d5\u30a9\u30fc\u30e0\u3067\u3059\u3002<\/p>\n<form id=\"form\">\r\n <input type=\"text\" name=\"email\" value=\"test@example.com\"><br>\r\n <input type=\"text\" name=\"password\" value=\"secret\"><br>\r\n <!-- \ud83d\udc47 \u30d5\u30a1\u30a4\u30eb\u5165\u529b -->\r\n <input type=\"file\" name=\"file\"><\/strong>\r\n<\/form><\/pre>\n
FormData<\/code>\u3092\u4f7f\u3044\u3001\u3055\u3089\u306b\u30c7\u30fc\u30bf\u5f62\u5f0f\u306fapplication\/x-www-form-urlencoded<\/code>\u3092\u4f7f\u3044\u307e\u3059\u3002<\/p>\nconst formData = new FormData(document.getElementById('form'));<\/strong>\r\n\r\nfetch('https:\/\/jsonplaceholder.typicode.com\/posts', {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application\/x-www-form-urlencoded',<\/strong> \/\/ \ud83d\udc48 \u30c7\u30fc\u30bf\u5f62\u5f0f\r\n },\r\n body: formData <\/strong>\/\/ \ud83d\udc48 FormData\r\n .then(response => response.json())\r\n .then(data => {\r\n\r\n console.log(data);\r\n\r\n })\r\n .catch(error => {\r\n\r\n console.log(error);\r\n\r\n });<\/pre>\n\u304a\u308f\u308a\u306b<\/h1>\n
JavaScript<\/code>\u306e\u6a5f\u80fd\u3001fetch()<\/code>\u3067Ajax\u9001\u4fe1\u3059\u308b\u65b9\u6cd5\u3092\u7d39\u4ecb\u3057\u307e\u3057\u305f\u3002<\/p>\naxios<\/code>\u3068\u6bd4\u3079\u308b\u3068\u3061\u3087\u3063\u3068\u300c\u30af\u30bb\u304c\u5f37\u3044\ud83d\ude02<\/strong>\u300d\u306e\u3067\u3001\u6700\u521d\u306f\u3068\u3063\u3064\u304d\u306b\u304f\u3044\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/p>\naxios<\/code>\u306e\u5834\u5408\u3001\u6b21\u306e\u3088\u3046\u306bthen()<\/code>\u3068catch()<\/code>\u304c\u3072\u3068\u3064\u305a\u3064\u3067\u3059\u3057\u3001\u9001\u4fe1\u30e1\u30bd\u30c3\u30c9\u3082\u3072\u3068\u76ee\u3067\u5206\u304b\u308b\u306e\u3067\u3001\u3088\u308a\u76f4\u611f\u7684\u306b\u4f7f\u3048\u308b\u3093\u3058\u3083\u306a\u3044\u3067\u3057\u3087\u3046\u304b\u3002\uff08\u30fb\u30fb\u30fb\u3068\u3044\u3046\u304b\u3001\u306a\u305cfetch<\/code>\u3082\u3053\u308c\u3068\u540c\u3058\u306b\u3057\u306a\u304b\u3063\u305f\u306e\u304b\u4e0d\u601d\u8b70\u306a\u3068\u3053\u308d\u3067\u3059\ud83d\ude05\uff09<\/p>\naxios.post('https:\/\/jsonplaceholder.typicode.com\/postsake')<\/strong>\r\n .then(response => {<\/strong>\r\n\r\n \/\/ \u6210\u529f\u3057\u305f\u6642<\/strong>\r\n\r\n })<\/strong>\r\n .catch(error => {<\/strong>\r\n\r\n \/\/ \u5931\u6557\u3057\u305f\u6642<\/strong>\r\n\r\n });<\/strong><\/pre>\nJavaScript<\/code>\u30b3\u30fc\u30c9\u306e\u30b5\u30f3\u30d7\u30eb\u3067\u306ffetch<\/code>\u304c\u4f7f\u308f\u308c\u3066\u3044\u308b\u306e\u3082\u5897\u3048\u3066\u304d\u3066\u3044\u308b\u306e\u3067\u3001\u4eca\u5f8c\u306e\u305f\u3081\u306b\u899a\u3048\u3066\u304a\u3044\u3066\u640d\u306f\u3057\u306a\u3044\u3068\u601d\u3044\u307e\u3059\u3088\u3002<\/p>\n![\"\"](\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2020\/03\/no_12.png\")
<\/p>\n
\naxios<\/code>\u306b\u304a\u9858\u3044\u3059\u308b\u3053\u3068\u306b\u306a\u308a\u305d\u3046\u3067\u3059\ud83d\ude0a\ud83d\udc4d\u300d<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"