PHPとの間でAjax通信をおこなう[jQuery][post][done/fail/always][JavaScript]

jQueryを利用してPHPにデータをPOSTし、Ajax通信をおこないます。

※HTTPS化に伴い、現在本記事内のデモ画面は利用できない状態です。

ajax.html（デモ画面）

<!DOCTYPE html>
<html>
<head>
<title>PHPとの間でAjax通信をおこなう</title>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
		
<script type='text/javascript'>

$(document).ready(function(){
	
	$("#submit_bt").click(function(event){
		//フォームが通常の動きをしないように
		event.preventDefault();
		//初期化
		$("#ajax_result").empty();
		
		test();
	});
});

function test(){
 	var word_val1=$("#word_id1").val(); 
 	var word_val2=$("#word_id2").val(); 
 	
	$.ajax({
		type: 'POST',
		url: './test.php',
		data:{
			word1:word_val1,
			word2:word_val2
		},
		dataType: 'html',
	})
	//$.post('./test.php', {word1:word_val1,word2:word_val2})
	.done(function(data, status, jqXHR){
		$("#ajax_result").html(data);
		//$("#ajax_result").html(data.word1 +"と"+ data.word2);//PHPからJSON形式で返ってくる場合
	})
	.fail(function(jqXHR, status, error){
		 $("#ajax_result").html("エラーです");
	})
	.always(function(jqXHR, status){
		console.log(status);
	});

}

</script>

<head>
<body>

<form method="post">
	<input type="text" value="りんご" name="word1" id="word_id1" />
	<input type="text" value="バナナ" name="word2" id="word_id2" />
	<input type="submit" value="送信" id="submit_bt" />
</form>

<div id="ajax_result"></div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>PHPとの間でAjax通信をおこなう</title>

$(document).ready(function(){

$("#submit_bt").click(function(event){

//フォームが通常の動きをしないように

event.preventDefault();

//初期化

$("#ajax_result").empty();

test();

});

function test(){

var word_val1=$("#word_id1").val();

var word_val2=$("#word_id2").val();

$.ajax({

type: 'POST',

url: './test.php',

data:{

word1:word_val1,

word2:word_val2

dataType: 'html',

})

//$.post('./test.php', {word1:word_val1,word2:word_val2})

.done(function(data, status, jqXHR){

$("#ajax_result").html(data);

//$("#ajax_result").html(data.word1 +"と"+ data.word2);//PHPからJSON形式で返ってくる場合

})

.fail(function(jqXHR, status, error){

$("#ajax_result").html("エラーです");

})

.always(function(jqXHR, status){

console.log(status);

});

}

</script>

<head>

<body>

</form>

</body>

</html>

6行目

jQueryのバージョンはHosted Librariesを参照。

26〜34行目

$.ajax関数を利用して、非同期通信を実行しています。汎用的な$.ajax関数の代わりに、35行目のPOST形式専用$.post関数を利用することもできます。オプション（上記コードのtypeやurlの部分）に関しては公式ページ等をjQuery.ajax() をご覧下さい。

33行目

dataType

返ってくるデータの型を指定します。デモ画面ではPHP（test.php）からHTMLが返ってくるので、htmlを指定しています。もしtest.phpの8行目のようにJSON形式で返ってくる場合には、「dataType: ‘json’」のように指定します。このdataTypeオプションを指定しない場合（デフォルト）は自動で形式を判定してくれます。

36行目

done

Ajax通信が正常におこなわれた場合に呼ばれます。コールバック関数の引数dataにはPHPから返ってきたデータが入ります。デモ画面ではPHPからHTML形式が返ってきますが、もしtest.phpの8行目のようにJSON形式で返ってくる場合には、38行目のように処理をおこないます。

40行目

fail

Ajax通信がエラーの場合に呼ばれます。

43行目

always

Ajax通信が正常およびエラーいずれの場合も完了時に呼ばれます。

test.php（※下記コードはセキュリティ等の考慮はしていません。）

<?php

$word1 = $_POST['word1'];
$word2 = $_POST['word2'];

echo "<p>{$word1}と{$word2}を入力しました。</p>";

//echo json_encode(array("word1"=>$word1,"word2"=>$word2));//JSON形式で返す場合

<?php

$word1 = $_POST['word1'];

$word2 = $_POST['word2'];

echo "<p>{$word1}と{$word2}を入力しました。</p>";

//echo json_encode(array("word1"=>$word1,"word2"=>$word2));//JSON形式で返す場合

思考の葉

プログラミング・批評

思考の葉

プログラミング・批評

PHPとの間でAjax通信をおこなう[jQuery][post][done/fail/always]