https://fortune-cookie.tokyo/assets/js/ajax.js?v=1.0.610

1/**
2 * ajax関数をまとめたファイル
3 * ajax.js
4 */
5
6
7/**
8 * ajax処理（JSON形式でPOST）
9 * 第１引数：POSTするURL：【文字列】
10 * 第２引数：POSTするデータ：【配列】
11 * 第３引数：コールバック関数：【オブジェクト型】
12 * ※ajax送信成功後に実施したい処理
13 * 第４引数：コールバック関数に渡すパラメータ：【配列】
14 */
15const ajax = async function (url, request, callback = null, param = null) {
16  await fetch(url, {
17    method: "POST",
18    body: JSON.stringify(request),
19    headers: { 
20      "Content-Type": "application/json; charset=utf-8", 
21      "X-CSRF-TOKEN": csrf_token
22    },
23  })
24    .then(async function (res) {
25      if (!res.ok) throw new Error('HTTP ' + res.status);
26      return res.json();
27    })
28    .then(async function (data) {
29      // 返されたデータ(json)
30      if (callback) await callback(data, param);
31    })
32    .catch(async function (err) {
33      // エラー処理
34      console.log(err);
35    });
36}
37
38/**
39 * ajax処理(fetch)
40 */
41const ajax_fetch = function (url, request, callback = null, param = null) {
42
43  fetch(url, {
44    method: "POST",
45    body: request,
46    headers: { 
47      "X-CSRF-TOKEN": csrf_token
48    },
49  })
50    .then(function (res) {
51      if (!res.ok) throw new Error('HTTP ' + res.status);
52      return res.json();
53    })
54    .then(function (data) {
55      // 返されたデータ(json)
56      if (callback) callback(data, param);
57    })
58    .catch(function (err) {
59      // エラー処理
60      console.log(err);
61    });
62}
63
64//ajax(jsonp)の共通処理
65var ajax_jsonp = function (url, callback, params = null) {
66
67  fetchJsonp(url, {
68    timeout: 5000, //タイムアウト時間
69  })
70    .then(function (res) {
71      return res.json();
72    })
73    .then(function (data) {
74      // 返されたデータ(json) 
75      if (callback) callback(data, params);
76    })
77    .catch(function (err) {
78      // エラー処理
79      console.error(err);
80    });
81
82}
83
84function ajaxImgUpload(event, name) {
85
86  if (event.target.files === null || event.target.files === undefined) return;
87  let file = event.target.files[0];
88  let ui_id = document.getElementById('ui_id').value;
89  if (file) {
90      // フォームデータを作成
91      let formData = new FormData();
92      formData.append(name, file);
93      formData.append('name', name);
94      formData.append('ui_id', ui_id);
95
96      // Ajaxリクエストを作成
97      let xhr = new XMLHttpRequest();
98      xhr.open("POST", home_url + "ajax-img-upload", true);
99
100      xhr.setRequestHeader('X-CSRF-TOKEN', csrf_token);
101
102      //submitボタンを一時無効
103      let submit_elem = document.getElementById('form-submit');
104      submit_elem.classList.add("btn-disabled-sub");
105
106      //メッセージ表示
107      let newContent = '<div class="error-message add-message">画像をアップロード中です。<br>しばらくお待ちください。</div>';
108      let submit_message = document.getElementById('submit-message');
109      submit_message.insertAdjacentHTML('beforeend', newContent);
110
111      // アップロードが完了した際の処理
112      xhr.onreadystatechange = function () {
113          if (xhr.readyState === 4 && xhr.status === 200) {
114              // レスポンスデータをJSONとして解析
115              let response = JSON.parse(xhr.responseText);
116
117              document.getElementById(name + "_status").textContent = "";
118
119              // データを取得して使用
120              let image_url = document.getElementById(name + '_dummy');
121              image_url.value = response.file_name;
122
123              if (submit_message != null && submit_message.hasChildNodes()) {
124                  submit_message.removeChild(submit_message.lastChild);
125              }
126
127              if(response.error){
128                return;
129              }
130
131              let image_elem = document.getElementById(name);
132              let currentTimestamp = new Date().getTime(); // ミリ秒から秒に変換
133              let newContent = '<img src="' + root_url + 'public/uploads/' + response.tenant_id + '/' + response.file_name + '?' + currentTimestamp + '" class="img-fluid">';
134              newContent += '<div><button type="button" class="btn btn-sm btn-secondary file_delete" data-field="' + name + '">削除</button></div>';
135              newContent += '<input type="hidden" name="' + name + '" value="' + response.file_name + '">';
136              image_elem.insertAdjacentHTML('beforeend', newContent);
137
138              // 要素を取得
139              let fileInput = document.querySelector('input[type="file"][name="' + name + '"]');
140
141              // 親要素から要素を削除
142              if (fileInput && fileInput.parentNode) {
143                  fileInput.parentNode.removeChild(fileInput);
144              }
145
146              submit_elem.classList.remove("btn-disabled-sub");
147
148          }
149      };
150
151      // アップロード中の進捗を監視
152      xhr.upload.onprogress = function (event) {
153          if (event.lengthComputable) {
154              let percentComplete = (event.loaded / event.total) * 100;
155              document.getElementById(name + "_status").textContent = "アップロード中: " + percentComplete.toFixed(2) + "%";
156          }
157      };
158
159      // リクエストを送信
160      xhr.send(formData);
161  }
162}