雑多なレビューサイトこもれびゅー備忘録を兼ね PC周辺機器・家電製品・文房具等々の製品レビューを行っているサイトです

• ホーム
• プログラミング
• JavaScript

jQuery・PHPにてAjax通信を行う平成30年 10月 21日 作成

概略

画面遷移なしに表示ページの情報を更新する為には、サーバと非同期通信Ajaxで行われている。

その仕組みを習得し実装できるように。

手段

jQuery側でデータをAjax（JSON形式）でphpに渡し、そのデータを処理した後、再度jQueryへ渡す基本的な処理方法を学び、知識を深める。

実装方法

フォーム等より受け取ったデータをjQueryの$ajaxにてphpに渡し、何らかの処理後に再びjQueryへ渡す処理方法。

今回、「input type="text"」より受け取ったデーターをテキストに書き加え、その結果を表示するプログラム。

HTML

<input type="text" name="text" />
<input type="button" id="send_btn" value="送信" />
<div id="text"></div>

jQuery

$(function(){
	var jqxhr;
	
	$("#send_btn").click(function() {
		// 2重投稿を防止する為の処理
		if(jqxhr){
			return;
		}
		
		var text_data = $("input[name=text]").val();
		
		jqxhr = $.ajax({
			url: "/sample.php",
			type: "POST",
			dataType: "json",
			data:{
				text_data: text_data
			},
			// 通信に成功した場合の処理
			success: function(data){
			    if(data){
			    	$("#text").text("成功しました。");
			    	$("input[name=text]").val("");
			    	$("#send_btn").val("送信済");
			    }else{
			    	$("#text").text("失敗しました。");
			    	jqxhr = "";
			    }
			    setTimeout(function(){
				    $("#text").fadeOut("slow");
				}, 3000);
			},
			// 通信に失敗した場合の処理
			error: function(){
				console.log("error");
			},
			// 通信を終了した場合の処理（成功・失敗に関わらず）
			complete: function(){
				$("#text").show();
			}
		});
	});
});

php

<?php
	$text_data = (string)filter_input(INPUT_POST, 'text_data');
	
	$Judgment = false;
	
	// 空送信でなければテキストに書き込む
	if(!empty($text_data)){
		$file = "ファイルパス";
		$fp = fopen($file, "a+");
		flock($fp, LOCK_EX);
		if(fwrite($fp, $text_data."¥n") != false){
			$Judgment = true;
		}
		flock($fp, LOCK_UN);
		fclose($fp);
	}
	
	if($Judgment){
		// 結果をjson形式で返す
		header('Content-type: application/json; charset=utf-8');
		echo json_encode(true);
	}else{
		header('Content-type: application/json; charset=utf-8');
		echo json_encode(false);
	}
?>

考察

何とか形にはなったが、「Ajax」や「jQuery」の知識に乏しいので、ところどころで行き詰まるところもがあった。「jQuery」をもう少し勉強しなければと思った次第。

更に理解を進めてデータベースとの通信も行えるよう更に知識を深めて行く。

コメント