ajax・jquery・phpでPOSTする入門コードのサンプル

ajax,jquery

西暦を平成○○年に変換する、ajax・jquery・PHPの超簡単なサンプル

対象

jqueryを使ってajaxで非同期通信のページを組み込んでみたいけど、初めてで、どうコードを書いていいかよくわからん!
簡単なものでいいからコードを書いてみて、とりあえずどういう仕組みなのかイメージしたい!
……という人が対象です。

テキストボックスに数字を入力すると平成の年数に変換してくれ、アラートで出力する仕様です(入力は半角数字オンリー)

ちなみに実装にはjqueryプラグインが必要になりますので、公式サイトhttps://jquery.comに行ってプラグインをダウンロードするなり、グーグルにホストされているものを読み込んだりしてください。

ここでは、プラグインをファイルのあるディレクトリに配置しています。

テストページに飛びます。

サンプルコード

index.html

send.php

コードの解説

ajax部分

id=”send”の部分がクリックされると以下の関数が実行されますよ、と言っています。こんな簡単な記述の仕方ができるのはjquery様々ですね。

クリックされた時に発生するajax通信です。
ここでは、

  • type:データを渡す方式
  • url:データを渡すファイル
  • data:渡すデータ

の三つが記述してあります。

“data:{seireki:$(‘#seireki’).val()}”の部分の意味ですが、”seireki”という変数に、”$(‘#seireki’).val()”の値を代入する形になります。

まとめると、id=”seireki”の値をPOST通信でsend.phpに渡してね、と言っています。

ここではajax通信の接続の可否による条件分岐が記述してあります。成功した時はsuccess以下の処理、何らかの理由によりエラーになった時にはerror以下の処理を実行します。

send.phpからの返り値を受け取るためには、function(任意の変数名)と記述してあげ、これが肝心な戻り値になります。サンプルコードでは、hogeになってますが、hogehogeでもresでも大丈夫です。

肝心の処理の結果をアラートで表示するため、alert関数を使っています。alertに指定した変数名を入れといてあげましょう。

error内のXMLHttpRequest,textStatus,errorThrownですが、これを入力することで、エラーになった時にエラーの原因を判別するために必要な情報がサーバーから帰ってきます。

サンプルコードでは省略していますが、必要なら各値がどこかに表示されるようにしておいても良いでしょう。

alert(‘エラーです!’)によって、エラー時には「エラーです!」という文字列のアラートが表示されます。

return false;はclickイベントを押した時に別のページに飛ぶのを防ぐために記述してあります。
このページに関して言えば、変換ボタンの飛び先を指定していないので、return false;エラー表示が出ます。

まとめると、
接続が成功したら、send.phpから帰ってきた戻り値をアラートで表示してね、失敗したら「エラーです!」の文字列を表示して、接続の可否に関係なく別ページのリンクの遷移はやめてね。
ということが書いてあります。

send.php

ajax通信でindex.htmlのid=”seireki”のテキストボックス内の値を渡してもらいました。その値を受け取ってsend.phpで処理をします。

1行目はPOST形式で受け取った値を変数seirekiに代入しています。
2行目では、変数heiseiに変数seirekiから1988を引いた値を代入します。

西暦から1988を引いた値が平成の年数になります。

この処理で、変数heiseiによって返り値が決定します。返り値を渡すにはecho関数を使ってあげましょう(printとかでもいいですが)

ここでechoで記述された値が、index.htmlのhogeに戻り値として代入されます。
この処理では、
変数heiseiが1なら、「平成元年です!」
0以下なら、「その年は平成じゃないですよ!」
29以上なら、「未来のことはわからないです……。」
それ以外なら、「平成変数heisei年です!」が返り値として出力されます。
と、書いてあります。

ちなみに、ちなみに入力欄に数字以外の文字列が入力されたら、その年は平成じゃないですよ!になります。
後、上にも書きましたが、半角数字オンリーになります。

こんな感じでページの更新とか遷移とかせずに、必要なデータをやりとりできたりします。
これはデータではないけど。

laravel5で同じことやる↓