back
データストアのCRUD (5/6)
■オブジェクトの削除
残るは、オブジェクトの削除です。これも、del.htmlというWebページを用意することにしましょう。（下のリスト欄参照）
ここでは、「del.html?id=1」というようにして、IDというパラメータを付け足して削除するオブジェクトを指定し、それを削除するようにしています。ページをロードすると、JavaScriptのinitial関数が呼び出され、ここでクエリー文字列からIDパラメータの値を取得し、getDataを呼び出します。そして、callback関数で、取得したJSONデータからIDの値を取得し、フォームの非表示フィールドのvalueに設定しています。
基本的な流れは、edit.htmlの処理とだいたい同じですからわかるでしょう。フォームには、IDの値だけしかありません。サーブレット側では、POSTで送信されたIDの値を取得し、それをもとにオブジェクトを削除する、というわけです。
ここでは、「del.html?id=1」というようにして、IDというパラメータを付け足して削除するオブジェクトを指定し、それを削除するようにしています。ページをロードすると、JavaScriptのinitial関数が呼び出され、ここでクエリー文字列からIDパラメータの値を取得し、getDataを呼び出します。そして、callback関数で、取得したJSONデータからIDの値を取得し、フォームの非表示フィールドのvalueに設定しています。
基本的な流れは、edit.htmlの処理とだいたい同じですからわかるでしょう。フォームには、IDの値だけしかありません。サーブレット側では、POSTで送信されたIDの値を取得し、それをもとにオブジェクトを削除する、というわけです。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
※del.htmlの内容
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>LinkDataの削除</title>
<script type="text/javascript" src="lib.js"></script>
<script type="text/javascript">
<!--
function initial(){
var datas = getQuery();
getData(datas.id);
}
function callback(request){
var arr = eval(request.responseText);
var data = arr[0];
var msg = '<table border="1"><tr><td>' + data.title + '</td></tr>';
msg += '<tr><td>' + data.url + '</td></tr>';
msg += '<tr><td>' + data.comment + '</td></tr></table>';
document.getElementById("data").innerHTML = msg;
document.getElementById("id").value = data.id;
}
//-->
</script>
</head>
<body onload="initial();">
<h1>データの削除</h1>
<div>以下のデータを削除しますか？</div>
<div id="data"></div>
<form method="post" action="del">
<input type="hidden" id="id" name="id">
<input type="submit" value="削除">
</form>
</body>
</html>
※web.xmlへの追記
<servlet>
<servlet-name>del_linkdata</servlet-name>
<servlet-class>jp.tuyano.DelLinkDataServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>del_linkdata</servlet-name>
<url-pattern>/del</url-pattern>
</servlet-mapping>
| << 前へ | 次へ >> |