【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

【php・ajax・jquery】フロント側とサーバー側とで情報をやり取りする方法

  • 2016.03.10
  • 2016.05.12
  • 技術
【php・ajax・jquery】フロント側とサーバー側とで情報をやり取りする方法

もうそろそろ春の兆しが見える頃ですが、皆様如何お過ごしでしょうか。開発部森川です。

今回はajax通信とjqueryとphpを使って、ページを再読み込みすることなく(非同期で)サーバー側の情報を取得する方法を解説します。

aishipRでも随所で使用されている技術で、毎回リクエストをする度にページの読込をする必要がなく、ストレスの無い操作が可能になります。

非同期通信で情報をやり取りする方法

<script type="text/javascript">
  function SampleAjax () {
    $.ajax({
      type: "POST", // GETで通信したい場合はGET ・・・1
      url: hoge.php, // アクセスしたいファイル名 ・・・2
      data: {
        fuga : "fuga" // hoge.phpに送りたいフロント画面側の情報
        ・・・3
      },
      error: function () {
        // エラーハンドリング ・・・4
      },
      success: function () {
        // hoge.phpにアクセス後、フロント画面側でしたい処理
       ・・・5
      }
    });
  }
</script>

中身を見ていくと、大きく分けて5つのことをしていることがわかります。

1.Ajax通信のタイプを指定する

まず、通信の種類にはGETPOSTがあります。使用する用途に合った通信の種類を「type」で指定しましょう。

2.アクセスしたいファイル名を指定する

「url」で取得したい情報、もしくは送りたい情報を持っているファイルを指定します。

例えば「hoge.php」でデータベース上に保存している情報を取得してフロント画面上に表示させる、といったことができます。

3.サーバー側に送りたいフロント画面側の情報を指定する

フロント側の情報をサーバー側に送りたい場合は「data」の部分に記載します。
例えばセレクトボックスで選択した値を元にデータベースの情報を取得したい時などに使えます。

また、dataは以下のように配列として渡すことも可能です。

<script type="text/javascript">
  function SampleAjax () {
    var hoge = "hoge";
    var fuga = "fuga";
    var bar = "bar";
    var dataArray = {
      "data1": hoge,
      "data2": fuga,
      "data3": bar
    }; // hoge〜barをdataArrayとしてまとめることができる
    $.ajax({
      type: "POST",
      url: hoge.php,
      data: dataArray, // まとめたものをここに記載
      error: function () {
        // エラーハンドリング
      },
      success: function () {
        // hoge.phpにアクセス後、フロント画面側でしたい処理
      }
    });
  }
</script>

4.エラーハンドリング

何らかの要因でAjax通信に失敗した際に、エラーが発生した旨を閲覧者に知らせます。alertや表示したいエラーメッセージを「error」部分に記載します。

5.フロント画面側でしたい処理を記載

サーバー側で取得した情報をフロント画面に表示させる時、表示、もしくは書き換える箇所の指定を「success」に記載します。

これで閲覧者がページを更新することなく、サーバー側の情報をフロント画面に反映させることができます。

まとめ

以上の方法で、サーバー側で取得した情報をフロント画面に表示させたり、フロント画面のセレクトボックスやチェックボックスで選択した内容を元にデータベース上の情報を取得することができます。

いちいちデータ取得のたびにページを遷移させる手間も省けて、便利になりますね。

以上、開発部森川でした。

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+