IT技術にまつわる実験ノート

「長編を書くより、短編を数多く完成させてください。それが上達への近道です」 by 手塚治虫

自作Webアプリ「IT勉強会用 名刺ジェネレーター」を公開しました!ぜひご活用ください😀

https://it-benkyoukai-meishi.herokuapp.com/

jQuery で Ajax を使ってみる

はじめに

ここでは以下の動画を参考にして jQueryAjax を使ってみることにする。

 

使ってみる

ファイルを作成しておく。

 

jQuery の load メソッドでローカルの sample.txt を読み込んでみる。

f:id:matt-note:20190319091221p:plain

f:id:matt-note:20190319091238g:plain

 

load メソッドでファイルをロードした時に渡される3つの引数を出力してみる。

f:id:matt-note:20190319092134p:plain

f:id:matt-note:20190319092211p:plain

-> response には sample.txt の内容が格納されている。status はファイルのロードに成功したので success という文字列になる。xhr は色々なものが入っているオブジェクトということがわかった。

 

load メソッドの説明は以下の通り。load メソッドは内部的に ajax メソッドを実行しているとのこと。

f:id:matt-note:20190319092433p:plain

 

json ファイルを読み込んでみる。

json ファイルを取得しておく。

 

getJSON メソッドでローカルの json ファイルを読み込んでみる。

f:id:matt-note:20190319094220p:plain

f:id:matt-note:20190319094258g:plain

 

ajax メソッドで GET リスエストをしてみる。

f:id:matt-note:20190319100158p:plain

f:id:matt-note:20190319100212g:plain

 

ajax で POST リクエストをしてみる。

その前にフォームの値を取得してみる。

f:id:matt-note:20190319101453p:plain

f:id:matt-note:20190319101540p:plain

-> フォームの値を取得できた。

 

form の action を指定して、post メソッドで POSTリクエストを実行してみる。

f:id:matt-note:20190319102852p:plain

f:id:matt-note:20190319102922p:plain

-> これでデータを投稿できた。