ヤッチーのブログ

PHP,Bootstrap,J Query,Swiftやサーバ管理、トラウトのルアー釣り、ハードロック等の記録です

AJAXによる非同期処理

f:id:php-7com:20190813134316j:plain

f:id:php-7com:20190811082904j:plain

AJAXによる非同期処理をおさらいです。PHPなど動的ファイル類でフォーム処理POSTでデータ送信するとページ全体がページ遷移して、新たなページが再度読み込まれます。同じページから同じページに移行する際にも当然、再度ページ全体が読み込まれます。大袈裟に言えば、送信ボタンを押したら、ガチャンとページが切り替わります。

そうではなくて、ページの一部だけを変更したいことが生じます。そのような場合に、AJAXが有効です。

デモ1(基本的な仕組み)

よくある都道府県を選択したら、選択された都道府県に属する市町村のみが表示されるパターン↓

デモ2(都道府県選択と連動した市町村選択)

検索された都道府県の結果を選択したら、選択された都道府県に属する市町村のみが表示されるパターン↓都道府県も市町村もmySQLデータベース化しています。

デモ3(都道府県選択と連動した市町村選択)

デモ1のソースコード

HTMLファイル


<!DOCTYPE html>
<html>
<head>
<title>AJAXによる非同期処理をまじめに勉強する</title>
<meta charset="utf-8">
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="ajax2.js"></script>
<style type="text/css">
h1,h2,h3 { font-weight:inherit; }
.textbox,.selectbox { 	margin: 0.4em;	padding: 0.4em 0.4em;  	width: 200px; }
.result { margin: 0.4em; width:360px;	padding: 0.4em 0.8em; background:#FFCCFF; }
#submit_bt { margin: 0.4em;	padding: 0.4em 0.4em;  background: #03A9F4;	font-size:1.25rem;	color:white; }
</style>
<head>
<body>
 
<h1>AJAXによる非同期処理</h1> 
<div>下のテキストボックスへ文字列を入力し、セレクトボックスを選択し、送信ボタンを押してください。</div>
<form method="post">
	<div>テキストボックス1<input type="text" value="単語1" name="word_id1" id="word_id1" class="textbox" /></div>
	<div>テキストボックス2<input type="text" value="単語2" name="word_id2" id="word_id2" class="textbox" /></div>
	<div>セレクトボックス <select name="select1" id="select1" class="selectbox" />
		<option value="トヨタ">トヨタ</option>
		<option value="ニッサン">ニッサン</option>
		<option value="ホンダ">ホンダ</option>
	</select></div>
	<div><input type="submit" value="送信" id="submit_bt" /></div>
</form>
 
<h3>ページそのものは遷移せずに、下の三つの要素のみに結果が返されます</h3>
<div id="ajax_result1" class="result"></div>
<div id="ajax_result2" class="result"></div>
<div id="ajax_result3" class="result"></div>
 
</body>
</html>

AJAX

dataType: 'json'とするのが味噌です


$(document).ready(function(){	
	$("#submit_bt").click(function(event){
		//フォームが通常の動きをしないように
		event.preventDefault();
		//要素の中を空に
		$("#ajax_result1").empty();
		$("#ajax_result2").empty();		
		test();
	});
});
 
function test(){
 	var word_val1=$("#word_id1").val(); 
 	var word_val2=$("#word_id2").val(); 
 	var select_val1=$("#select1").val(); 
 	
	$.ajax({
		type: 'POST',
		url: './test2.php',
		data:{
			word1:word_val1,
			word2:word_val2,
			select1:select_val1
		},
		dataType: 'json',
	})
	.done(function(data, status, jqXHR){
		$("#ajax_result1").html(data.word1);
		$("#ajax_result2").html(data.word2);
		$("#ajax_result3").html(data.select1);
	})
	.fail(function(jqXHR, status, error){
		$("#ajax_result1").html("エラーです");
		$("#ajax_result2").html("エラーです");
		$("#ajax_result3").html("エラーです");
	})
	.always(function(jqXHR, status){
		console.log(status);
	}); 
}   

PHP

データを配列で返すのにJSON形式にするのが味噌です。


<?php 
$word1 = $_POST['word1'];
$word2 = $_POST['word2'];
$select1 = $_POST['select1'];
   
header("Content-type: application/json; charset=UTF-8");
echo json_encode(array("word1"=>$word1,"word2"=>$word2,"select1"=>$select1));
?>