前処理・後処理2（ユーザデータ編集）
# First Last Handle 編集
1 James Smith @james
2 John Williams @john
3 Robert Brown @robert
4 Michael Miller @michael
5 William Taylor @william

一般的な Ajax の実装例として、ユーザデータ編集のサンプルを用意しました。


サンプルでは鉛筆マークをクリックすると対応するユーザのデータを取得し、モーダルウィンドウを表示して取得したデータをフォームに反映します。

モーダルウィンドウのボタンをクリックすると、フォームを POST しメッセージ出力後モーダルウィンドウを閉じます。

Script Source
// ユーザデータを取得しモーダルウィンドウ上のフォームへ反映
class MyAjax extends PRAjax{
	after(data, textStatus, jqXHR, confirm){
		$("#id_modal1").modal('show');
	}
}
var getAjax = new MyAjax("get.php", "get");
getAjax.onClick("#id_icon1", {"no":1}, true);
getAjax.onClick("#id_icon2", {"no":2}, true);
getAjax.onClick("#id_icon3", {"no":3}, true);
getAjax.onClick("#id_icon4", {"no":4}, true);
getAjax.onClick("#id_icon5", {"no":5}, true);

// モーダルウィンドウ上のフォームデータを送信
class PostAjax extends PRAjax{
	before(args){
		var confirm = window.confirm(args);
		if(!confirm) return false;
	}

	after(data, textStatus, jqXHR, confirm){
		$("#id_modal1").modal("hide");
	}
}
var postAjax = new PostAjax("post.php", "post");
postAjax.onSubmit("#id_form1", "入力された内容でユーザデータを更新します。よろしいですか？");
get.php
$reps = array(
	'id_name'=>$name,
	'id_handle'=>$handle,
	'name_sex'=>$sex,
	'id_userno'=>$no
);

$res = array();
$res['dom']['replace'] = $reps;
$response = json_encode($res, JSON_UNESCAPED_UNICODE);
print $response;
post.php
$name = $_REQUEST['name_name'];
$handle = $_REQUEST['name_handle'];
$sex = $_REQUEST['name_sex'];
$no = $_REQUEST['name_userno'];
$vals = array('name_name'=>$name, 'name_handle'=>$handle, 'name_sex'=>$sex, 'name_userno'=>$no);

$res = array();
$res['vals'] = $vals;
$names = explode(' ', $name);
$dom = array('id_first'.$no=>$names[0], 'id_last'.$no=>$names[1], 'id_handle'.$no=>$handle);
$res['dom']['replace'] = $dom;
$response = json_encode($res, JSON_UNESCAPED_UNICODE);
print $response;