筆者について
- 2018年4月G's Academy LAB5期に入学
- 初めてコード書き始めて、３ヶ月目。
- 対応可能言語:HTML, CSS, PHP, JS(jQuery), laravel
Twitter : https://twitter.com/yoheiyouhey
Instagram : https://www.instagram.com/yoheiyouhey/
投稿の経緯
先日学内でPHP選手権があり、その際に作ったサービスで有難いことに4位入賞しました。
この際に、Ajax通信による画像登録と文字列の登録同時処理に少し苦労したので、
私の書いたコードと処理内容をシェアしたいと思います。
Ajax通信処理コード
以下のような登録フォームを作りました。ここから、画像やデータの登録を行います。
変数へ画像データの挿入
（↑jQuery内のAjax通信部分のコード）
Ajax通信による画像登録におけるポイント以下の二つです。
①"formdata"という変数を用意し、そこに"formタグ"につけたid="form"を参照して置き、
（↑HTML内のform部分のコード）
②"new FormData"という関数で、をformのデータ取得することです。
そうすることで、form内にある画像を"formdata"という変数に入れることができます。
文字列データを入れる方法
そのまま変数"formdata"を利用します。
"formdata.append(文字列データ)"とすることで、変数"formdata"に文字列データが入ってくれます。
たったこれだけ！
Ajax通信コードを書く
ただし、１つだけ注意点があります。
"data"の箇所に変数"formdata"とだけ書くことです。
普通の文字列のみのAjax通信でしたら、この箇所に、取ってきたデータを一つ一つ書くことが多いと思いますが、ここでは、すでに上で、変数"formdata"にデータを入れているので、不要となります。
以上が、登録フォームにおけるAjax通信の処理コードになります。
PHP処理ファイルで情報の受け取りとデータベースへの登録処理
(↑私はsetting_act.phpをいうファイルを用意しました。)
以上で、Ajax通信による画像と文字列登録処理は完了です。
確認作業
私自身のデータを登録して見ます。
きちんと登録されていました！
最後に
始めて、Qiitaに投稿しました。
至らない点も多いかと思いますが、これからも発信を少しずつしていけたらと思います。
アドバイスやご指摘等ありましたら非常に有難いです！
どうぞよろしくお願い致します。