送信後の自動処理2（HTML編集）
ID: id_area1
Source

レスポンスデータに "dom" を設定することにより、送信後（応答受信後）に HTML の DOM 操作を行います。


サンプルでは「変更」ボタンで要素の追加が行われ、「元に戻す」ボタンで追加された要素を削除します。

レスポンスデータ $res['dom']['XXXX'] のXXXXに以下の命令セットのいずれかを指定し、変更を行う要素の ID と値を配列で指定します。


・append

ID で指定された要素の中の最後尾にタグが追加されます。


・prepend

ID で指定された要素の中の先頭にタグが追加されます。


・after

ID で指定された要素の直下にタグが追加されます。


・before

ID で指定された要素の直前にタグが追加されます。


・replace

ID で指定された要素の中身、あるいは value を上書きします。


・removef

ID で指定された要素を削除します。

Script Source
var ajax = new PRAjax("response.php", "post");
ajax.onClick("#id_button1", {"type":1});
ajax.onClick("#id_button2", {"type":2});
response.php
$type = $_REQUEST['type'];
$dom = array();

if($type == 1){ // 変更
	$dom['append'] = array('id_area1'=>'<div id="id_append" class="ele">append</div>');
	$dom['prepend'] = array('id_area1'=>'<div id="id_prepend" class="ele">prepend</div>');
	$dom['after'] = array('id_area1'=>'<div id="id_after" class="ele">after</div>');
	$dom['before'] = array('id_area1'=>'<div id="id_before" class="ele">before</div>');
	$dom['replace'] = array('id_source'=>'replace');
}else{ // 元に戻す
	$dom['removef'] = array('id_append'=>1, 'id_prepend'=>1, 'id_after'=>1, 'id_before'=>1);
	$dom['replace'] = array('id_source'=>'source');
}

$res = array();
$res['dom'] = $dom;
$response = json_encode($res, JSON_UNESCAPED_UNICODE);
print $response;