リンクのクリックをサポートしますが、Ajaxなしでサーバーに投稿（vs get）を送信しますか？

StackOverflow https://stackoverflow.com/questions/2791969

質問

私はこれが正確には不可能ではないと思っていますが、多分私は間違っています。私は単に、リクエストのみがサーバー上のデータを変更する必要があると信じている人と、ルールをリラックスさせ、GETリクエストがデータを変更することを許可する人との間で引き裂かれました。

この状況を取ります。テーブルがあるとします。各行はデータベースの行です。最後のように、派手な「x」アイコンを介して行を削除できるようにしたい <td></td> 行の要素。 Afaik、サーバーに投稿を送信する唯一の方法は、フォームを介してです。しかし、私は本当にフォーム全体を最後に詰めますか <td></td> 投稿をするだけですか？または、ごまかして使用する必要があります <a href=...></a> ゲットリクエストを送信するタグ？

あなたは「両方をする！投稿を送って、 <a ...></a> 鬼ごっこ！ Fancy JavaScript + Xhr！」を使用します。

たぶん、私たちは優雅に劣化することを心配するのが意味がないときに到達したのでしょうか？わからない。教えてください？私はWeb開発を初めて使用していますが、関連する概念のほとんどを理解しています。

役に立ちましたか？

解決

各最終TDにフォームを詰め込む必要はありません。各最終TDに送信ボタンを持つ単一のフォームでテーブル全体を囲むことができます。それぞれに異なる名前/ID値が必要です。

    <td><input type="submit" name="delete_172" value="Delete"></td>
    ...
    <td><input type="submit" name="delete_198" value="Delete"></td>

その後、サーバーはシングルを受け取ります delete_172=Delete 形で POST パラメーター。一致するようにすべてのパラメーターをスキャンします delete_[0-9]+, 、Underscoreで分割すると、削除するレコードのレコードIDがあります。または、削除するレコードIDを見つけるマップキーがあります（セキュリティのためにレコードIDをページから締め出す場合）

その後、JSイベントハンドラーをフォームOnSubmitイベントに添付して、XHRを介してすべてを送信し、テーブル行を動的に削除します。

他のヒント

GETリクエストの変更データの問題の1つは、リンクデータにアクセスすることにより変更されることです。リンクは、たとえば、Googleがサイトをrawっているたとえば、人によってナビゲートされないかもしれません。更新を押すと、データも変更されます。

Get vsの投稿に関するコンベンションを無視することはアドバイスしません。バックボタンとページのリフレッシュなどは、あなたに地獄を与えます。 （そして、あなたがポストリクエストをフィールドするたびに、同じ理由で、新鮮なビューにリダイレクトしてください。）

あなただけがあなたのユーザーを知っていますが、「Webアプリケーション」でJavaScriptを要求し、No-JSの男に「Webページ」に固執することはかなり受け入れられていると思います。とにかく、それが価値があることのために、私は時々（Ajaxよりも）JavaScriptソリューションをこのようにするのが好きです...

ページ内のどこにでもフォームを置きます：

<form method="post" target="yourpage.ext" id="deleteRecordForm">
 <input type="hidden" name="IdToDelete" value="" id="deleteRecordInput" />
</form>

あなたのリンクのために：

<a href="#" onclick="deleteRecord(thisId);return false;">[x]</a>

最後に、JavaScript：

<script type="text/javascript">
 function deleteRecord (id){
   if (confirm ('Are you sure you want to delete this record?')){
     document.getElementById('deleteRecordInput').value = id;
     document.getElementById('deleteRecordForm').submit ();
   }
 }
</script>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top