FC2ブログ

jQueryとAjaxを使ってデータの削除処理を実装

jQueryとAjaxを使ってデータの削除処理を実装

#15 データを削除してみよう (1)
http://dotinstall.com/lessons/contacts_php_v2/9815
を元に
jQueryとAjaxを使ってデータの削除処理を実装

編集するファイルは
admin/index.php

まず、jQuery を使うので、ライブラリの読み込み

HTMLの head 要素の中に
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
を追記

deletelink に対してクリックされたときの処理を
jQuery で実装する

書き込み場所は
お問い合わせフォームへのリンクの下あたり

$(function(){
$('.deletelink').click('function(){
if(confirm("削除してもよろしいですか?")){
$.post('./delete.php',


.deletelink は
class="deletelink" という意味
. は jQuery ではクラスを意味する

confirm() は java script で 確認ウインドウを開く
""の中に書いた
削除してもよろしいですか?は
そのときにでるメッセージ

これは
Step.17 - 確認ウィンドウで問い合わせる
http://www.red.oit-net.jp/tatsuya/java/confirm.htm
がわかりやすい

$.post() は
ajax jQuery を使ったPOST送信
これを使うと、複雑な$.ajax() を使わずに
サーバーと通信できる
http://semooh.jp/jquery/api/ajax/jQuery.post/+url,+data,+callback,+type+/
を参考にするとわかりやすい

書式としては
$.post(url, data, callback, type)
となる

$.post(
'./delete.php',
{ id: $(this).data('id')},
function(rs){
$('#entry_' +rs).fadeOut(800);
});
}
});


コールバック関数で消したいのは li 要素なので
li要素に id をつける

<li id="entry_<?php echo h($entry['id']); ?>">
とする
PHPで 呼び出しているので
ループしている間、自動的に id を付与してくれる

また、コールバック関数内で
rsに id が入るようになるので
entry_ + rs だと
id=1 なら entry_1 となる
スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック