問題 × 解決策

Ajaxで外部ファイルに値を渡す方法

問題

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

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

17 + seventeen =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧