JavaScriptを使用したアンカータグのグレースフルデグラデーション

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

質問

現在、Webアプリケーションで（jQueryを使用して）AJAXリクエストを実行するためにアンカータグに依存しています。例：

<script type="text/javascript">
    $(document).ready(function() {
        $("#test").click(function() {
            // Perform AJAX call and manipulate the DOM
        });
    });

    <a id="test" href="">Click me!</a>
</script>

ただし、ユーザーがブラウザでJavaScriptを無効にすると、これらのアンカータグはほとんど役に立たなくなります。これらのアンカータグのグレースフルデグラデーションを処理する最良の方法は何ですか？それらをすべてフォームタグ内のボタンに切り替える唯一のオプションはありますか？

編集：AJAX呼び出しが、セキュリティ上の理由から通常のHTTP GETに公開できないURLへのHTTP POSTであることを明確にし、指定する必要があります（例：delete url <！> quot; / items / delete / 1 <！> quot;）。それを念頭に置いて、アンカーのhrefを<！> quot; / items / delete / 1 <！> quotに変更することはできません。 Javascriptを無効にしてユーザーを満足させるには、セキュリティリスクが生じるためです。

役に立ちましたか？

解決 3

探していた答えは、コメントの1つに埋もれています：

  

<a>タグを使用してHTTPを実行する   POST操作が競合しています。 <=>は   HTTP GET用に設計されています。見つけられない   ここに満足のいく答えがあれば   操作のセマンティクス   <=>タグに埋め込まれます。見る    http://www.w3.org/2001/tag/doc/whenToUseGet。 html

他のヒント

1つのオプション（私は間違いなくダウン投票されるでしょう）は、javascriptをオフにしている人に迷惑をかけないことです。サイトにJavascriptが必要であることをユーザーに知らせる<noscript>タグでメッセージを表示します。

影響を受けるのは2つのグループです。javascriptを故意に無効にし、おそらくそれを再び有効にする方法を知っている人と、古いモバイルデバイスでサイトを表示している人です。

これらの人々のグループが、彼らのために何時間も何時間も費やす前に、どれほど重要であるかを考えてください。

シンプル。少なくとも、クライアントに配信されるHTMLではなく、javascript：URI構文をhrefとして使用しないでください。

Hrefを使用してサーバーからHTMLを配信し、ユーザーを取得したいページに移動します。次に、アンカータグのhrefを置換（またはonclickイベントをキャプチャ）し、必要な処理を行います。イベント発生のデフォルトアクション。

<script type="text/javascript">
    $(document).ready(function() {
        $("#test").click(function(e) {
            // Perform AJAX call and manipulate the DOM
            e.preventDefault();
        });
    });

    <a id="test" href="/Proper/URI">Click me!</a>
</script>

そして控えめなJavaScriptを読むという提案に完全に同意します。

控えめなJavaScript を読んで、実際のマークアップからJSの動作を分離する方法を学習してください。私が投稿する他のすべては、他の誰かが他の場所でより良いと言ったことの再ハッシュになります

JSを使用しない場合の最善の方法は、送信ボタンのあるフォームを用意し、フォームのアクションをURLにポイントすることです。

ボタンのスタイルを設定して、リンク（または他の何か）のように表示できます。

<button class="linkstyle" type="submit">Foo</button>
<style type="text/css">
button.linkstyle { border:none; background:none; padding:0; }
<style>

Particletreeの記事には、ボタンのスタイリングの良い例があります。ボタン要素の再発見

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top