JavaScriptでPOST送信

JavaScriptでPOST送信

カテゴリー：JavaScript

記事作成日：2022.02.19

JavaScrpitでPOST送信する方法を書き留めておく。帰り値はJSONで受け取り

## MDN

<a href="https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch" target="_blank">https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch</a>

## 基本形

```
<script>
(() => {
	const _postUrl = 'https://example.com/api/aaa.php';
	const _val = 1;

const fd = new FormData();
	fd.append('val',_val);
	fetch(_postUrl, {method:'POST', body:fd})
		.then(response => response.json())
		.then(result => {
			console.log(result);
		})
		.catch(error => {
			console.error(error);
		});
})();
<script>
```

## CakePHP4のAPI呼び出しで使用

ログイン情報を維持しつつ内部APIの呼び出し

```
<?php

<?= $this->Form->hidden('Customes.id',['value'=>$entity->id]) ?>
<?= $this->Form->text('Customes.note',['size'=>10,'id'=>true]) ?>

<?= $this->Form->create(null,['url'=>['controller'=>'Apis','action'=>'setCustomerValue']]) ?>
<?php $this->Form->unlockField('Customers'); ?>
<?= $this->Form->end() ?>

<script>
(() => {
	const _postUrl			= "<?= $this->Url->build(['controller'=>'Apis','action'=>'setCustomerValue']) ?>";
	const _csrfToken		= document.querySelector('form[action$="set-customer-value"] > div > input[name="_csrfToken"]').value;
	const _tokenFields		= document.querySelector('form[action$="set-customer-value"] > div > input[name="_Token[fields]"]').value;
	const _tokenUnlocked	= document.querySelector('form[action$="set-customer-value"] > div > input[name="_Token[unlocked]"]').value;
	const _tokenDebugElm	= document.querySelector('form[action$="set-customer-value"] > div > input[name="_Token[debug]"]');
	const fd = new FormData();
	fd.append('_csrfToken',_csrfToken);
	fd.append('_Token[fields]',_tokenFields);
	fd.append('_Token[unlocked]',_tokenUnlocked);
	if (_tokenDebugElm) {
		fd.append('_Token[debug]',_tokenDebugElm.value);
	}
	fd.append('Customers[id]',document.getElementById('customers-id').value);
	fd.append('Customers[note]',document.getElementById('customers-note').value);
	fetch(_postUrl, {method:'POST', body:fd})
		.then(response => response.json())
		.then(result => {
			console.log(result);
		})
		.catch(error => {
			console.error(error);
		});
})();
<script>
```

## XMLHttpRequest を使用した以前の書き方

```
<script>
(() => {
	const _postUrl = 'https://example.com/api/aaa.php';
	const _val = 1;

const fd = new FormData();
	fd.append('val',_val);
	const xhr = new XMLHttpRequest();
	xhr.open('POST',_postUrl);
	xhr.onreadystatechange = () => {
		if ((xhr.readyState == 4) && (xhr.status == 200)) {
			const response = xhr.responseText;
			const result = JSON.parse(response);
			console.log(result);
		}
	};
	xhr.send(fd);
})();
<script>
```

CONTENTS

Android

Androidアプリの合計ダウンロード数、iOSアプリの合計ダウンロード数

Flutter

Android Studio. Could not determine java version. Unable to find bundled Java version.

その他

XAMPPのMySQLを復旧

ブラウザ

各ブラウザでのキャッシュクリアまとめ

JavaScript

JavaScriptで動画読み込み

Unreal Engine

Unreal Engine 5 (5.0.3)でパッケージ成功しても.exe起動で何も表示されない

ウェブサーバー

WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED

Plesk

fail2banでBANされたIPをSSHで解除する

Flutter

flutter 右上のDEBUG帯を消す

Flutter

flutter: uses-sdk:minSdkVersion 16 cannot be smaller than version 19 declared in library

JavaScript

JavaScriptのthisが変化してしまう。変化させない方法。

CakePHP4

Package setasign/fpdi-tcpdf is abandoned, you should avoid using it. No replacement was suggested.

CakePHP4

CakePHP4.4でワーニング。Deprecated: Use of `BaseErrorHandler` and subclasses are deprecated.

PHP

XAMPPのMySQLが起動しない。赤文字のエラーメッセージ

CakePHP3

Class Cake\Composer\Installer\PluginInstaller is not autoloadable, can not call post-autoload-dump script

3D

Lightwave3DでSkyBoxレンダリング設定

3D

Lightwave3DでSkySphere(360度球体)レンダリング設定

CSS

CSSで要素をdisplay:gridで重ねる。position:absoluteは使わない。

JavaScript

JavaScriptでのメディアクエリ、matchMedia() ブラウザ幅による分岐

Flutter

FlutterでAdMobバナー広告をフッターまたはインラインで設置

Flutter

Flutter アプリの向きを縦固定にする

Flutter

Flutterで多言語化、動的に言語切り替え、言語保存、ハンバーガーメニュー

Flutter

Flutter開発のAndroidアプリをGooglePlayにリリース

Flutter

Flutterで音再生効果音再生

Flutter

FlutterでSVG画像を表示

ウェブサーバー

Warning: Using a password on the command line interface can be insecure.

Flutter

ITMS-90683: Missing Purpose String in Info.plist

Flutter

ITMS-90078: Missing Push Notification Entitlement

Flutter

Dart SDK is not configured

その他

Windows11、Windows10の21H2からファイル名の文字コードの扱いがUTF-8に。

Plesk

拡張子 .tzst を圧縮解除(解凍)する。Zstandard圧縮tarファイルZSTD

Plesk

Plesk メールデータを一括ダウンロード

Android

解決: ご対応のお願い: Google Play のポリシーをアプリが遵守していません

PHP

Plesk PHP8.1に ssh2 extension をインストール

PHP

XAMPP PHP8.1 にSSH2をセットアップ ssh2_connect()を使用する

JavaScript

HTMLモーダルウインドウの背景を固定

PHP

php json_decodeで結果がNULLになる円記号(バックスラッシュ)を含む

その他

SourceTreeでPUSHできない。Logon failed, use ctrl+c to cancel basic credential prompt.

JavaScript

古いブラウザ判定 Safari13までとSafari14以上の判定

Plesk

Plesk PHP8.0に ssh2 extension をインストール

Plesk

Plesk マイグレーションerror /usr/local/psa/admin/plib/api-cli/domain_pref.php

JavaScript

JavaScriptでPOST送信

CakePHP4

CakePHP4 バリデーションルールを切り替える

Plesk

Plesk FTPアクセスをアクティブからパッシブに変更

ウェブサーバー

AWS LightSail CentOS8 から AlmaLinux8 に変更

Android

resource android:color/system_neutral1_1000 not found.

その他

Windows11 Hyper-VにAlmaLinuxをセットアップ

その他

Windows DNSリゾルバ・キャッシュを削除

CakePHP4

CakePHP4 Mailer Return-Path設定 mb_send_mail 第5引数のadditional_params

その他

Windows11 スクロールバーの幅を広くする

CakePHP4

CakePHPの適合PHPバージョン一覧

その他

OpenBugBountyからのメール。Security Vulnerability Notification

Photoshop

PhotoshopでWebP形式の画像を扱う

Photoshop

Photoshopが重い。遅い。

その他

Windowsでファイルを変更するが更新日時タイムスタンプは変更したくない場合

JavaScript

文字列変換ライブラリ日付を日本語表示数字を億万表示

JavaScript

入力フォームの整形とデータチェック、バリデーション

JavaScript

JavaScript多機能スムーススクロール SVG対応

JavaScript

JavaScriptで複数のJSONを非同期で読み込み

JavaScript

モダンブラウザか否かの判定ユーザーエージェント不使用

その他

Got error 176 Read page with wrong checksum from storage engine Aria

Unreal Engine

UE4 GPUがクラッシュしているかD3Dデバイスが削除されています

JavaScript

YouTube動画埋め込みで、動画停止後に任意の処理を実行する

CakePHP4

Composer detected issues in your platform: Your Composer dependencies require a PHP version ...

ブラウザ

FirefoxでURL欄から検索させない。

ウェブサーバー

mod_rewrite、RewriteRule のデバッグ。正規表現にマッチした値を表示する

CSS

CSS counter 自動ナンバリングまとめ

CSS

CSSで変数(カスタムプロパティ)まとめ

その他

パソコン版Googleドライブを使用するとファイルアクセスが遅くなる

ブラウザ

Firefox 右クリックメニュー「画像の情報を表示」を復活

その他

パソコン起動しない ASUS The system has POSTed in safe mode.

Plesk

Plesk TLS暗号化種類を変更

その他

Windows11に備えて起動ディスクを非破壊でMBRからGPTへ完全無料で変換する方法

Android

Androidアプリローカルでは動作するがストア公開すると動作しない

Blender

Blender Smokeエフェクトで炎が出ないときの対処

iOS

iOSアプリ登録申請で却下 Guideline 4.3 - Design

iOS

iOSアプリ登録申請で却下 Guideline 2.1 - Performance - App Completeness

iOS

iOSアプリ登録申請で却下 ITMS-90713: Missing Info.plist value

iOS

iOSアプリ登録申請で却下 Guideline 2.5.10 - Performance - Software Requirements

iOS

iOSアプリ登録申請で却下 Guideline 4.2 - Design - Minimum Functionality

iOS

iOSアプリ登録申請で却下 Invalid Binary.

iOS

iOSアプリ登録申請で却下 ITMS-90035: Invalid Signature

iOS

iOSアプリアップロードエラー Missing or invalid signature

iOS

M1 Macに cocoapods セットアップ

iOS

Xcode iOSシミュレーターで録画。前準備必要

iOS

SwiftUI アプリ名のローカライズ

iOS

Xcode コンパイル所要時間の表示

iOS

SwiftUI 動画コントローラー非表示で動画再生

Android

Androidアプリ開発表示画面の回転固定縦固定横固定

iOS

SwiftUI 画像を表示。リサイズして表示

iOS

SwiftUI データを端末保存。アプリ内で使用

iOS

SwiftUI @State、@ObservedObject、@EnvironmentObject

iOS

SwiftUI 多言語化の手順と使用方法

iOS

SwiftUI 数字のみ受付するTextField。安全にInt変換

iOS

SwiftUI 動作が勝手にスムージングされるのをやめる

iOS

SwiftUI 画像に画像を任意の位置に重ねる

iOS

SwiftUI iPadタブレットで全面表示にする。左側に小さくならないようにする

iOS

Swift アプリを縦固定にする

Plesk

Pleskからエラーメール。ls: cannot open directory /usr/lib64/httpd/modules: Permission denied

Android

Androidアプリ開発、View Binding 使用

Android

Androidアプリ開発、別Activityへのデータ受け渡し

Android

Androidアプリ開発、テーマカラーの変更。ダークテーマに動的切り替え

Android

Androidアプリ開発、背景タップでキーボードを隠す

Android

Androidアプリ開発、タイトルバーを非表示にする

Android

Androidアプリ開発、表示言語をアプリ内で切り替える

Android

Androidアプリ開発、ImageViewの上下に余白ができる

Plesk

Plesk channel: no 'mirrors.sought.rules.yerp.org' record found, channel failed

Plesk

Pleskの診断して修復　データベースでWARNING

Plesk

Pleskの診断して修復　ウェブサーバとFTPサーバでWARNING

Plesk

Pleskにフルホスト名と同じドメインを登録して削除したらルート宛にメール送信できなくなる

ウェブサーバー

hotmail.com、live.com、msn.com、outlook.com へ送信したメールがエラーで返ってくる。

Android

Androidアプリ開発。SVG画像が表示されない。string too large ・・・ instead as 'STRING_TOO_LARGE'.

ブラウザ

SVG形式のファビコン

JavaScript

HTMLラジオボタンをチェックしてもcheckedにならない

PHP

phpMyAdminのデータベースエクスポートでファイル名に日時を付加する

ウェブサーバー

Access-Control-Allow-Originヘッダーで複数のドメインを処理するオリジン間リソース共有(CORS)

CakePHP4

cakephp4で、failed to open stream: No such file or directory in /path/to/vendor/composer/autoload_real.php on line 71

Plesk

Plesk 修復が終了しないプロセスのスタック

Plesk

Plesk. table MailOutgoingMessagesStats の破損修復

Plesk

Plesk. Checking for nginx ULIMIT value 1 domains have been found on server.

Plesk

Plesk repair db でエラーが直らない

Plesk

Plesk psa データベースのバックアップとリストア

Plesk

Plesk メールフォームのメールが送信できない。mb_send_mail 554:5.7.0

CakePHP4

CakePHP4 View出力をファイルに保存

CakePHP4

Yahoo!スタティックマップAPIの代替。Bing Maps。CakePHP4コンポーネント作成

CakePHP4

CakePHP4でテーブルの変更履歴を別テーブルに保存するビヘイビア

CakePHP4

CakePHP4でCSRFを特定のコントローラやアクションで無効化

PHP

エラー対応 Can't connect to local MySQL server through socket /tmp/mysql.sock

Plesk

Plesk キーアップデート遅延通知。ライセンスの自動更新に失敗する。

Plesk

Pleskでmail、mb_send_mailが出来ない。エラーが返る

Plesk

Pleskサーバのセキュリティ強化に使用されている Lets Encrypt 証明書が自動更新されない

3D

Facebookの3D写真をCGで作成。Lightwave

CakePHP4

CakePHP4でエラー Missing CSRF token body in /path/to/Middleware/CsrfProtectionMiddleware.php on line 254

Plesk

Pleskで PHP Composer でエラー Could not update the integration plugin

CakePHP4

XAMPP7.4.4(PHP 7.4.4)でCakePHP4を動作させるとエラー。The datasource configuration debug_kit was not found

Illustrator

Illustratorで名前とバーコードを差し込み印刷

Plesk

PleskでのSPFスパム防御

Plesk

Pleskで大きなファイルをアップロードできない。エラーログにclient intended to send too large body

Plesk

Pleskライセンスキーが更新されない。502 Bad Gateway が出る。手動で更新。

CakePHP4

CakePHP4のCommand(旧Shell)でコンポーネントを使用する。

CakePHP4

CakePHP4で CSRF Middleware の適用範囲を細かく制御する。特定のコントローラだけCSRFチェックさせない。

Plesk

PleskでDNSのCAAレコード追加

Plesk

Plesk Apache の Welcome ページを非表示にする。WAFのリダイレクト先。

Plesk

Plesk . PHP Fatal error: Call to undefined function mb_convert_encoding()

Plesk

AWS Plesk . Can not bind a socket to address subdom.mydom.tld:715 - Cannot assign requested address

Plesk

PleskでホスティングしているドメインにhttpsでアクセスするとPlesk管理画面が開く

Plesk

AmazonAWS Lightsail で Plesk Migrator を使用する。

Plesk

Plesk で Lets Encrypt の更新に失敗する。証明書を発行できません。Could not secure domains

Plesk

Plesk Onyx から Obsidian へアップグレードした時のログ

Plesk

Plesk で PHP Fatal error: Call to undefined function mysqli_connect()

Plesk

Plesk に SSH2 Extension セットアップ php7.3

Plesk

PleskでwwwサブドメインのみLetsEncryptを適用する

Plesk

Plesk タスクが0%のまま進行しない。タスクがスタックしている場合の解除

CakePHP3

CakePHP3 viewの出力を動的に最適化(コンパクト化) .ctp出力のインデント等の無駄排除

Plesk

Plesk で ImunifyAV が Failed to scan スキャンに失敗する

ウェブサーバー

メールサーバーの設定を確認 SPF DKIM

Plesk

Plesk Obsidian でフルホスト名を設定しても反映されない場合

その他

Thunderbirdを Ver.68 64bit にアップデート(Windows10)

Plesk

Plesk phpのexecでphp実行。Imagick使用

NextCloud

Plesk拡張でNextcloudセットアップ軽量化を目指す

JavaScript

GoogleAnalyticsでイベントトラッキング一括設定 gtag.js

ウェブサーバー

MJ12botからのアクセスを禁止する

CakePHP3

20110#0: * connect() failed (111: Connection refused) while connecting to upstream

Android

Androidアプリ開発で net::ERR_CLEARTEXT_NOT_PERMITTED のエラー発生

ブラウザ

各ブラウザでの強制リロード(スーパーリロード)まとめ

3D

Lightwave3D から 3D PDF 作成手順

PHP

XAMPP for Windows php7.2.9 に ImageMagick インストール

JavaScript

Adobe Brackets 最小構成の拡張機能をjavaScriptで作成

JavaScript

Visual Studio Code 最小構成の拡張機能をJavaScriptで作成

CakePHP3

CakePHP3(CakePHP3.6)でバリデーションが利かない。評価されずに通過する。

Plesk

PleskのCRONがJSTではなくUTCで実行される。service crond restart でも直らない。

Plesk

Plesk PHP-FPMでエラーページを設置する場合、存在しないファイルと存在しないディレクトリの違い

ウェブサーバー

/bin/bash^M: bad interpreter: No such file or directory

CakePHP3

CakePHP3で取得したdateのフォーマットが年2桁。年4桁にデフォルトを変更する

Plesk

Plesk に SSH2 Extension セットアップ php7.2

PHP

XAMPP PHP7.2 でSSH2。 Call to undefined function ssh2_connect()

SVG

SVGをdataURLでCSSに埋め込み

ウェブサーバー

ウェブサーバーの指定ディレクトリを丸ごとCRONでローカルに複世代自動アーカイブする

ウェブサーバー

ウェブサーバーのMySQLデータベース複世代自動バックアップ(ダンプ出力)

NextCloud

NextCloudでユーザー作成時に自動設置されるファイルを無くす。または変更する。

ウェブサーバー

NGINXでindex.phpを表示させない。index.phpを省略したい。リダイレクトループを防ぐ。

Plesk

PleskでNextCloud(OwnCloud)セットアップとamazonS3接続で無限ストレージ

Docker

Docker for WindowsのVMイメージをCドライブ以外に作成

Docker

Dockerで OCI runtime create failed 。docker-compose.yml の volumes が原因？

ブラウザ

Firefoxのタイムアウト値変更

CSS

Windows10のIE11では正常表示だが、Windows7のIE11ではレイアウトが崩れる

CakePHP3

XAMPPが遅い。localhostでの開発が遅い。反応速度が悪い。IPv4の優先度を上げる

Plesk

Plesk n日以前の既読メールを削除

Plesk

Plesk postfixのメール送信失敗から再送までの動作。再送メールキューの扱い。

Plesk

Plesk Onyx で PHP Warning: fsockopen(): php_network_getaddresses: getaddrinfo failed: Name or service not known

Plesk

Plesk Onyx 17.5.3 から 17.8.11 へアップグレード

Plesk

Pleskで、システムのパッケージマネージャデータベースで不整合が検出されました。この問題を手作業で解決

Plesk

Plesk メールログ保管期間の延長

CSS

CSS フレックスボックス display:flex のまとめ

SVG

インラインSVGで隙間が出来たり、IEは小さくなったり、正常に表示されない

PHP

phpで、文字列を1文字ずつの配列に変換

Plesk

Pleskへの管理者アクセス制限IPアドレスを一括登録

Plesk

Pleskで、メールアドレス一括登録

Plesk

Pleskで、メールコンテンツを含ませずにメールの構成だけを保存

Plesk

Pleskで、/etc/httpd/logs/error_log　に　Can't locate CGI/Carp.pm　の記録

Plesk

Pleskでperl(CGI)がエラー。End of script output before headers 詳しい情報を知る方法

Plesk

Plesk で、顧客に紐づいているプロバイダを変更する

JavaScript

ECMAScript2015の構文覚え書き

PHP

PHPでHTMLの構文チェック。終了タグ無しやタグの入れ子違いでエラーを出したい

CakePHP3

CakePHP3ではDATE型フィールドのタイムゾーンはUTCになる

JavaScript

初めてのECMAScript2015とBabel

SVG

SVGでハッチングパターン覚え書き

Plesk

古いMacのChromeでサイトが見れない。ERR SPDY INADEQUATE TRANSPORT SECURITY

WebAssembly

WebAssemblyの環境を整えた。最低何を記述すれば動くのか。asm.jsからwasm生成

WebAssembly

WebAssemblyの環境を整えた。最低何を記述すれば動くのか。Cからwasm生成

Plesk

Plesk RoundCubeで特定のユーザーだけ画面真っ白。ブランクページの表示。date.timezone設定。

Plesk

エラーメッセージ connect() failed (111: Connection refused) while connecting to upstream

ウェブサーバー

メール送信が拒否 550 5.7.606 Access denied. mail.protection.outlook.com

ウェブサーバー

大量の404アクセス。Microsoft Office Protocol Discovery

CakePHP2

CakePHP2をサーバー移転したらエラー。open_basedir restriction in effect

Plesk

Plesk ModSecurity ルールセットの更新に失敗　modsecurity_ctl failed

CakePHP3

CakePHP3で、PHP Parse error: syntax error, unexpected T_USE, expecting

Plesk

Pleskでロードアベレージ確認

CakePHP3

CakePHP3 HTMLラジオボタンでlabelの位置がCakePHP2と違う。inputタグを制御できない

Plesk

Pleskでcomposer プレスクでコンポーザーを使用

CakePHP3

CakePHP3 imgタグじゃないimgのアドレス(パス)を得る。拡張子を指定する

CakePHP3

CakePHP3 日付の表示が年/月/日 (YYYY-MM-DD) じゃない

Plesk

Plesk環境のウェブサーバーでintl.soが古い? ICUが古い?

CakePHP3

CakePHP3 バリデーションでフィールドの値がユニークかチェック

CakePHP3

CakePHP3 データベース更新ログをビヘイビアで作成

CakePHP3

CakePHP3 で intl ICU がエラー。問題箇所はCORE/src/Utility/Text.php

CakePHP3

CakePHP3 Controller/AppControllerのサブクラスを間に挟む

CakePHP3

CakePHP3 Model/Entityのサブクラスを間に挟む

CakePHP3

CakePHP3 Model/Entityで自分のテーブル名を知る。及び、フィールドの最大値をセットするコード

CakePHP3

CakePHP3でテーマ作成

このページでお気付きの点がございましたら
ご連絡いただけますと幸いです。

お問い合わせ

このページのQRコード

便利ウェブサイト

便利 Android アプリ

便利 iOS(iPhone) アプリ

エーオーシステム

© ao-system, Inc.
エーオーシステム株式会社