問題
Ajaxで外部ファイルに値を渡すには？
解決策
「Ajax」のパラメータで、「type: 'post'」+「data: { '渡す値のキー': 渡す値の内容 }」を設定することで、外部ファイルに値をPOSTで渡すことができます。
Ajaxにて外部ファイルに値を渡す
Ajaxにて外部ファイルに値を渡すことで、様々な動作を実現することができます。
今回はAjaxで外部ファイルに値を渡す方法をご紹介します。
- ※今回は本日の日付のデータを外部ファイルに渡し、本日の曜日を返す例になります。
AJAXを使用する方法を過去の記事で紹介していますので、ぜひこちらもご覧ください。
Ajaxで外部ファイルを表示させる
DEMOはこちら
HTML
AJAX処理を行うためのボタンと、AJAXで外部ファイルから読み込んだデータを表示させるための空の要素を用意します。
<div class="ajax-box">
<p class="btns"><a href="#">外部ファイルを表示</a></p>
<div class="inner-box"></div>
</div>CSS
AJAXの処理が完了するまで、ロード中であることを示すため、ローディング画像を表示させるためのcss設定を行います。
.ajax-box .inner-box .loading-box{
display: block;
height: 130px;
background-image: url("ajax-loader.gif");
background-position: center center;
background-repeat: no-repeat;
background-size: 100px auto;
}AJAXで外部ファイルに値を渡す記述例
AJAXで外部ファイルに値を渡す記述例は以下になります。
var actionkey = "dateweek";
var dt = new Date();
var y = dt.getFullYear();
var m = ("00" + (dt.getMonth()+1)).slice(-2);
var d = ("00" + dt.getDate()).slice(-2);
var date = y + m + d;
jQuery.ajax({
type: 'post',
dataType:'text',
data: {
'action': actionkey,
'date': date
},
cache: false,
url: "test.php"
}).done(function(data) {
$('.ajax-box .inner-box').html(data);
}).error(function(XMLHttpRequest, textStatus, errorThrown) {
alert('error!!!');
console.log("XMLHttpRequest : " + XMLHttpRequest.status);
console.log("textStatus : " + textStatus);
console.log("errorThrown : " + errorThrown.message);
});ポイント!
- 「data: { ‘渡す値のキー’: 渡す値の内容 }」で、外部ファイルに値を渡すことができます。
「jQuery.ajax({ … })」のパラメータの一例
| type | 外部ファイルへ渡すデータのタイプ（POSTまたはGET）を指定できます。 |
|---|---|
| data | 外部ファイルへ渡す値を設定することができます。 記述例 … 「data: { ‘渡す値のキー’: 渡す値の内容 }」 |
外部ファイルの記述例
外部ファイルの記述例は以下になります。
test.php
<?php
function dateweek(){
if(!empty($_POST['date'])):
$date = date( $_POST['date'] );
endif;
$week = array( '日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日' );
echo $week[ date( 'w', $date )];
} //dateweek
if(!empty($_POST['action'])):
$actions = $_POST['action'];
$actions();
endif;
?>ポイント!
- 「$_POST[‘値のキー’]」を使うことで、先ほど渡した値を取得することができます。
- 「$_POST[‘action’]」を使って実行することで、一つのファイル内で様々な処理に分岐することができます。
参照
以下のサイトが、より詳しく解説してくれています。
【$.ajax() | jQuery 1.9 日本語リファレンス | js STUDIO】
http://js.studio-kingdom.com/jquery/ajax/ajax
コメント