jQueryでCRUDをAjaxで作ってみる

jQuery Ajax

これって記述が人によってバラバラになるのではないかと思い、自分なりに考えた形をメモしておきます。

使用したバージョン
jQuery-1.7.1
jQuery-UI-1.8.17

画面構成
とりあえず単純なサンプル画面を作ってみました。dialogやdatepickerはjQuery-UIのものです。
一覧画面

登録画面（jquery-uiのdialog）

編集画面（jquery-uiのdialog）

ローディング中の表示（jquery-uiのdialog）

エラーが発生した場合

検索系処理
一覧画面の検索は、表の部分をまるまるHTMLで作成しておいて、埋め込む形にしました。

Ajax呼び出し元

// 一覧データの検索と表示
function selectList()
{
	// ローディングダイアログを開く
	$('#loadingDialog').dialog('open');
	
	$.ajax({
		url: 'selectList',
		success:function(data)
		{
			$('#sampleList').html(data);
		},
		error:function(data)
		{
			alert('一覧の読み込みでエラーが発生しました');
		},
		complete:function(data)
		{
			// ローディングダイアログを閉じる
			$('#loadingDialog').dialog('close');
		}
	});
}

URL「selectList」に対するレスポンス

<table border="1">
	<tr>
		<th>id</th>
		<th>name</th>
		<th>num</th>
		<th>date</th>
		<th></th>
	</tr>
	<tr>
		<td>001</td>
		<td>ほげざえもん3</td>
		<td>5005</td>
		<td>2012-02-03</td>
		<td><a href="javascript:openEditDialog('001')">編集</a><a href="javascript:deleteData('001')">削除</a></td>
	</tr>
　　　　...

一方、「編集」リンクを押した時に編集対象のデータを検索しますが、ここは検索結果をJSONで返すようにしています。

Ajax呼び出し元

// データ編集ダイアログを開く
function openEditDialog(sampleId)
{
	// ローディングダイアログを開く
	$('#loadingDialog').dialog('open');
	
	// データを検索してJSONを解析
	$.ajax({
		url: 'selectData/' + sampleId,
		success: function(data)
		{
			// 文字列をJSONパース
			var json = $.parseJSON(data);
			// JSONの値を各項目に設定
			$('#sampleId').val(json.sampleId);
			$('#sampleName').val(json.sampleName);
			$('#sampleNum').val(json.sampleNum);
			$('#sampleDate').val(json.sampleDate);
			
			// 編集用ダイアログを表示
			$('#editDialog').dialog('open');
		},
		error: function(data)
		{
			alert('データの取得に失敗しました。');
		},
		complete:function(data)
		{
			// ローディングダイアログを閉じる
			$('#loadingDialog').dialog('close');
		}
	});
}

URL「selectData/001」に対するレスポンス

{"sampleDate":"2012/02/03","sampleId":"001","sampleName":"ほげざえもん3","sampleNum":5005}

登録／更新処理
データのinsert、updateはサーバー側は共通処理にしていて、キー項目がDB上に存在するかどうかで
判断するようにしています。

Ajax呼び出し元

// データを追加もしくは削除
function insertOrUpdateData()
{
	// ローディングダイアログを開く
	$('#loadingDialog').dialog('open');
	
	// フォームデータのシリアライズ
	var params = $('#editForm').serialize();
	$.ajax({
		type: 'post',
		url: 'insertOrUpdateData',
		data: params,
		success: function(data)
		{
			// ダイアログを閉じる
			$('#editDialog').dialog('close');
			// 項目消去
			clearDialogElements();
			// リスト更新
			selectList();
			
			// 更新しましたメッセージ
			openUpdatedDialog();
		},
		error: function(data)
		{
			alert('追加／更新処理でエラーが発生しました');
		},
		complete:function(data)
		{
			// ローディングダイアログを閉じる
			$('#loadingDialog').dialog('close');
		}
	});
}

削除処理

Ajax呼び出し元

// データを削除
function deleteData(sampleId)
{
	var result = confirm('削除してもよろしいですか？');
	
	if(result)
	{
		$('#loadingDialog').dialog('open');
		
		$.ajax({
			url: 'deleteData/' + sampleId,
			success: function(data)
			{
				// 一覧を再表示
				selectList();
				
				// 更新しましたメッセージ
				openUpdatedDialog();
			},
			error: function(data)
			{
				alert('削除処理でエラーが発生しました');
			},
			complete:function(data)
			{
				$('#loadingDialog').dialog('close');
			}
		});
	}
}

まとめ？

  • 検索処理は、結果をHTMLで返すかJSONで返すか統一するべき？
    • HTMLだと、JavaScriptでタグを組まずに済むから楽
    • JSONだと、ブラウザ以外のクライアントにもサーバーの処理を使いまわしやすい
  • jQueryでajaxをするときは$.ajaxで統一してはどうか。
    • $.getや$.postは簡単だけど、エラー時の処理を記述できない


これって、PhoneGapでもそのまんま流用できそう。
今度試してみよう・・・。
■追記
まるっきりそのまんまで動かない場合もあります。別にまとめたいと思います。