使ってみようAjax!後編〜AjaxとJSONとPHPを合わせて使ってみる〜

こんにちは。
最近お肉より野菜の方が好きになってきてしまったsatoです。これではイカん!肉を食わねば…!

 
今回は前回の続きで、予告通り”post”を使い、phpで処理したデータをJSON形式にしてhtml上に表示する方法を書いてみようと思います!

 
内容としては、ブラウザ上で入力した数字をphpで計算し、非同期で画面に表示させるというものです。

 

コード

“post”も基本的な書き方は前回の”get”と同じです。
では今回は省略した書き方で書いてみましょう。

 
$.post( url [, data ] [, success ] [, dataType ] )

 
です。

 
書き方の形は少し違えど、中身は前回の基本の書き方と同じですね!
まず、計算を担当するphpです。
phpは私が書いたわけではないので内容説明は控えます…とにかくこれで計算できるんです!

次にhtml。適当に…。

 
肝心のJSです。

 
urlは「php」フォルダの中の「api」フォルダに入れたので「php/api/post_test.php」と書いています。
input[ ]でhtmlから入力部分を取得しています。「v1」「v2」部分に入力された文字を計算します。
半角数字以外の文字が入っている場合はnullが返されます。
JSON値を返すようにするためdataTypeはjsonです。

 
表示してみるとボックスが2つとボタンが1つ出て、数字を入力してボタンを押すと画面がリロードされることなく計算されると思います。
結果
※CSSでちょっとわかりやすくしています。

 

まとめ

少しステップアップした内容かとは思いますが、”post”も前回の”get”とさほど変わっていないと思います!
HTMLもCSSもJavaScriptも書けて、かつAjaxやJSONが自在に使えるようになれば、WEB開発のフロント部分は大体一人でできるようになる…らしいです!

 
特にデザイナーにとってはなかなかとっつきにくいかとは思いますが、是非これを機に色々な技術に手を出してみてください!

 
それでは良いJavaScriptライフを…。



❏❏ TOPIC ❏❏ ------------------------------------------------------------

カスタム自由!フリーECサイトパッケージ
チャットボット導入サービス
WEBシステム開発・スマホアプリ開発はSRIAへ