Ajaxで画像の削除

質問

tableで一覧に画像が20個あります。
画像の横に「削除」ボタンがあります。
それぞれにidが振ってあり、そのボタンを押すと該当の画像が削除されて、
noimage.jpgに切り替えたいです。
PHPの部分で画像の削除の処理はできているのですが、
Ajaxの部分がよくわかりません。(パラメータの受け渡し、画像の戻し方)
詳しい方、教えていただけるでしょうか。
よろしくお願いいたします。

回答No.3

LancerVII · ベストアンサー

こんにちは。

jQueryを利用しての送信は以下のようにします。
(サーバからのレスポンスはJSONと仮定)
$.post (
'delete.php',
{ id: id },
function ( json ) {
}
);
パラメータの部分は { パラメータ名 : パラメータ値 }
ですので { id: id }の場合、PHP側では$_POST['id']で取得します。
サーバからJSONを返すとfunction(json)が呼ばれますのでそこにnoimageへの書き換えを記述します。

タグ構成が違うと、一部変更しないといけません
(imgタグへのアクセス部分等)
が動作サンプルを提示します。
削除ボタンをクリックするとサーバ上へidを送信し、削除処理(ダミー)を実行して成功/失敗をJSONにて返します。
受け取ったJSONのstatusがsuccessの場合はnoimageへの変更を実行します。(偶数番号が成功、奇数は失敗します)

==== 動作サンプル
http://hppg.moe.hm/okwave/qa/q7545172/

回答No.2

神崎 渉瑠（@taloo）

>Ajaxの部分がよくわかりません。(パラメータの受け渡し、画像の戻し方)

どういう作り方をしてるのかもわからないので、なんとも、、、
パラメータなんて、
id1=ok
でも何でもいいです。
受け取りはresponseTextに入っていますから、文字列（変数）として処理すればいいです。

パラメータのルールを決めるのは質問者さん自身です。

設問：カッコ内のセリフを埋めてください。

A「このゴミを捨ててください」
B「了解しました。（　　　　　　）を行いました。」

Aの作業
もしBのセリフが（　　　　）なら
→ゴミ捨て完了と見なす
そうでなければ
→ゴミ捨てに失敗したと見なす

そういうのがわからなければ、JavaScriptを使わず、<form>とPHPだけで作った方がいいのではないでしょうか？

回答No.1

fujillin

表示している画像要素を削除するだけならajaxは不要かと思います。

各画像にidまで振ってあるとのことなので、当該ボタンを押したらjavascriptで
　var elm = document.getElementById(id);
　elm.parentNode.removeChild(elm);
のような処理を行えば削除可能です。

でも、ご質問の内容だと画像を入替えればよいだけのように思われますので
　document.getElementById(id).src = "noimage.jpg";
だけでよさそうですね。

サーバーにある画像データを本当に削除してしまうという意味であれば、
ajaxでデータを送る必要がありますが、その際に受け取る側がidから画像を識別できるのならidでもかまいませんが、画像のuriを送ったほうが確実そうに思えます。
通常はXMLHttpRequestを利用して送るでしょうから、例えばxhrに取得できているとして
　xhr.send(data);
のdataで内容を送信してあげればよろしいでしょう。
ただし、実際の削除処理はサーバ側のプログラムで行なう必要があります。

補足

質問にも書いていますが、サーバ上に登録してある画像を削除する必要があります。
PHPで削除処理を書いています。
画像ボタン
<img src="/images/del_btn.gif" alt="削除" id="image1" />
のようなボタンが20個あり、
それをクリックすると該当する画像を削除します。
ajaxはjqueryを利用しています。
再度となりますが、ご回答をお願いします。