PROGRAMMINGCodeIgniterを使って、AJAX機能を持ったコンタクトフォームを作る方法です。当記事では、過去に作成したコードを使っていきます。login_function※上記コードがなくても記事自体は理解可能です。くじCodeIgniterの初期設定AJAX解説用にコンタクトフォームを作成するAJAXを実装していくそれではまとめてきます。CodeIgniterの初期設定DBの作成DB名:ci_loginカラム数:6その後、ログイン用のアカウントを作成してください。src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script></head><body>ここで、includes/headerが読み込まれる部分の解説を行ないます。トップページのURLは以下です。http://localhost/login/上記はloginコントローラーが読み込まれてることを意味しますので、loginコントローラーのindexファンクションを確認してみます。すると以下のプログラムがあります。login_formのビューのデータをmain_contentに格納する。,$data);}includes/templateを読み込む際に、データ[main_content]が渡されています。main_contentとはなんでしょう?includes/templateを確認してみます。?>以上でわかったかと思います。loginコントローラーが読み込まれる際に、login_formのビューデータがデータ[main_content]に格納され、格納されたデータ[main_content]がincludes/template内で読み込まれている仕様です。CodeIgniterのAJAX利用において、コンタクトフォームを元に解説します。here";}}以下にアクセスして、動作すればOK。,$data);}}では、contact_formのビューを作成していきます。form_close();?>form_textareaに関して、form_textareaを利用する場合は、arrayでcolsとrowsを指定する必要があります。指定した値をdataで受け取ってから、form_textareaにデータを渡しています。ちなみに、rowsはrowの複数形で、colsはcolumnの複数形(の略)のことです。rowは行、columnは列です。この時点で送信ボタンを押すと、404エラーになります。ジャンプ先のURLは以下。http://localhost/login/index.php/contact/submitcontactコントローラー内にsubmitファンクションがない為にエラーが発生しています。それでは、submitファンクションを作っていきます。,$data);}次にcontact_submittedビューを作成していきます。新規作成ファイル:application/controller/contact_submitted.php<div><h1>Thanks!</h1></div>ここで、再度送信ボタンを押すと、Thanks!と表示されるはずです。AJAXを実装していきます。今回のデモサイトではAJAXの良さが分かりづらいですが、コンテンツ量の多いWebサイトにおいて、AJAXは有効です。コンタクトフォーム部分のみをリロードすることにより、ユーザビリティが向上します。form_close();?>それでは、jQueryを書いていきます。送信ボタンを無効化する編集ファイル:application/views/contact_form.phpAJAXを書いていく編集ファイル:application/views/contact_form.phpこの時点で送信ボタンをクリックすると、以下の写真のポップアップが表示されます。なにも起こらなかった場合は、ディベロッパーツールのコンソールからエラーを確認してみましょう。AJAXでの取得するデータを制限する現状はサンキューページのすべてのデータが読み込まれています。必要なデータはcontact_submittedページの情報のみです。それを以下のコードで実現していきます。"1"};ajaxで1の値を取得しておきます。次に、contactコントローラーを編集します。,$data);};}すると、送信ボタンを押した際の挙動は次の写真のようになります。function(msg){$("#main_content").html(msg);}すると以下のように表示されます。分かりづらいですが、フッターの部分はリロードがおきていません。画面には』『Thanks!』の文言がでていますが、URLは変化しない点に注目してください。最後におまけとして、jQueryでバリデーションを追加してみます。("名前を入力してください。ページ遷移をさせない。false;};以上で、名前のフォールドのみにバリデーションが追加されました。今回は以上となります。コードはgithubで公開しています。:16記事で解説】SEOプログラミング・ブログの学習の有料ロードマップ【公開】プログラミング独立の完全ロードマップ【月20万を稼ぐ道】PROGRAMMINGブログ型アフィリエイトの完全講義【ブログ歴6年の僕の集大成です】BLOGお仕事の依頼はこちらからどうぞWebマーケティングコンサルティングの依頼ページSEO25万円:ビジネススタートにおけるWeb制作・運用設計をサポートしますPROGRAMMINGマナブブログ・アフィリエイト・プログラミングを愛しています。ブログを書きまくる→ブログ収益7桁達成。普段はバンコクを中心に南国にひきこもりつつ、生活費は5万円くらいで生きています。me!ブログ・アフィリエイト・プログラミングを愛しています。ブログを書きまくる→ブログ収益7桁達成。普段はバンコクを中心に南国にひきこもりつつ、生活費は5万円くらいで生きています。