php - JS: リンクのクリックを処理するようにこの関数を変更する

Question

ここの例に従って、非常にシンプルな jQuery と PHP Ajax リクエスト – すぐに使用できるコード

値を外部 PHP スクリプトに渡し、HTML 出力を同じページの「div」に戻すドロップダウンリストの作成に成功しました。うまく機能します。

私が今したいのは、ドロップダウンリストを作成する代わりに、リンクをクリックしたときに値を投稿することです。だから...このリンクを作成した場合：

<a href="foo.php?route_number=2">Route Number 2</a>

その外部 PHP スクリプトに「2」を渡し、現在ドロップダウンで動作しているため、「 div 」でコンテンツを変更したいと考えています。これを処理するためにJavaScriptを変更する方法や、「foo.php」が本当に必要なものがわかりません。

その例の現在の JavaScript は次のとおりです。

    <script type="text/javascript">
    $(document).ready(function() {
        $('#route_number').click(function() {
            routenumber = $('#route_number').val();
            $.post('api.php', { route_number : routenumber }, function(res) {
                $("#mainlayer").html(res);
            });
         });
    });
    </script>

HTML のドロップダウン部分は次のようになります。

    <select name="route_number" id="route_number">
    <option value="notchosen">Please Choose A Route</option>
    <option value="2">Riverfront</option>
    <option value="11">Magazine</option>
    <option value="16">Claiborne</option>
    </select>
    <div id="mainlayer">

    </div>

したがって、明確にするために、値を渡すドロップダウンの代わりに、同じ結果を達成するリンクを作成したいと考えています。

前もって感謝します、

ダン -

score 2 · Accepted Answer

クラスを作成し、その (クリックしたリンクを意味する) 値をキャプチャしてから、投稿します。

<a class="RouteNumber" href="foo.php?route_number=2">Route Number 2</a>

$(function(){
    $('a.RouteNumber').on('click',function(event){
        // prevent the browser's default action for clicking on a link
        event.preventDefault();

        // break href attribute into array, then parse desired value as int
        var routenumber = $(this).attr('href').split('='),
            rtnum = parseInt(routenumber[1]);

        $.post('api.php',{route_number:rtnum},function(res){
            $("#mainlayer").html(res);
        });
    });
});

整数を解析する必要がない場合 (文字列で十分な場合)、その 2 番目の変数は必要ありません。routenumber[1]投稿データでそのまま使用できます。

念のため、 .on()構文を使用するように jQuery を変更しました。.click() は省略形ですが、.on() を使用するのが好きです。より多くのことをしたい場合 (たとえば、mouseenter/mouseleave など) のコード作成の可能性を減らすことができるからです。それらを 1 つのコードセットに組み合わせることができるからです。

score 1 · Accepted Answer

@LifeInTheGreyの例を修正するだけで十分だと思っていましたが、別の方法で行ったことがいくつかあり、おそらく説明が必要です。

HTMLは次のようになります。

<a class="route" href="foo.php?route_number=2" data-route="2">Route Number 2</a>

JavaScriptは次のようになります。

$(function() {
    var fill_div_with_response = function(res) {
        $("#mainlayer").html(res);
    };

    var handle_error = function(res) {
        alert('something went wrong!');
    };

    $(document.body).on('click', '.route', function(event) {
        // prevent the browser's default action for clicking on a link
        event.preventDefault();
        // grab route number from data attribute
        var route = $(this).data('route');
        // make that post request
        $.post('api.php', {route_number: route})
            // handle the response
            .done(fill_div_with_response)
            // handle errors
            .fail(handle_error);
    });
});

この例では、委任されたイベントを使用しています。初期化が安価で、メモリの消費量が最小になります。
この例はエラーを処理します。これらのような質問に対するほとんどの答えはそれを無視しています。エラーが発生します。いつも。人々にそれを認識させます。確かにを投げることはあなたがやりたいことでalert()はありませんが、それでも単にエラーを完全に無視するよりはましです。
この例では、コールバックではなくDeferreds（Promises）を使用しています。これにより、通常、コードがはるかにクリーンになります。
次のクリックでコールバックが再定義されないように、コールバックfill_div_with_response()とhandle_error()ルートクロージャを定義しています。ガベージコレクターにフィードする必要はありません。
data属性は、文字列からその番号を抽出するために属性を<option value="123">解析する必要がないようにするための最適な代替手段となります。href

score 1 · Accepted Answer

メニューを作りたいので、マークアップを修正します

<ul name="route_number" id="route_number">
    <li value="2">Riverfront</li>
    <li value="11">Magazine</li>
    <li value="16">Claiborne</li>
</ul>

次に、そのリストを処理するだけです。

$('#route_number').find('li').click(function () {
    var routenumber = $(this).attr('value');
    $.post('api.php', {
        route_number: routenumber
    }, function (res) {
        $("#mainlayer").html(res);
    });
});

EDIT1：改善として（あなたはこのことにかなり慣れていないようです）、マークアップを変更したデータを次のように使用できます：

<ul name="route_number" id="route_number">
    <li data-routenumber="2">Riverfront</li>
    <li data-routenumber="11">Magazine</li>
    <li data-routenumber="16">Claiborne</li>
</ul>

次に、コードは次のようになります。

$('#route_number').find('li').click(function () {// add click event manager to each li
    var routenumber = $(this).data('routenumber');// get routenumber of clicked
    $.post('api.php', {
        route_number: routenumber
    }, function (res) {
        $("#mainlayer").html(res);
    });
});

.on() フォームを使用した代替コード

$('#route_number').on('click, 'li', function () {//click event manager for ul/li
    var routenumber = $(this).data('routenumber');// get routenumber of clicked
    $.post('api.php', {
        route_number: routenumber
    }, function (res) {
        $("#mainlayer").html(res);
    });
});

この最後のフォームは #route_number 要素にバインドされるため、処理中にメニューオプションを追加しても機能することに注意してください。これは、イベント添付へのより焦点を絞ったアプローチであるため、ドキュメントへの添付よりも優れています。

score 0 · Accepted Answer

あなたの質問に対する私の理解は、あなたが持っている機能は問題なく、ドロップダウンからテキストの一部に外観を変更するだけでよいということです. もしそうなら、朗報です！(ほぼ) 同じ JavaScript を維持できます。

現在、JavaScript は選択ボックスの値を取得し、AJAX を介して送信し、返された値を使用しています。必要な唯一の変更は、クリックされたテキストの「値」を取得することです。

リンクはユーザーをどこかに連れて行くように設計されているため、リンクを使用したくありません。代わりに、スパンを使用して、リンクのように見えるようにフォーマットしたり、そのような外観が必要な場合はボタンにすることもできます。

$('#route_number').val();また、おそらくクリックイベントによって渡されるものに変更する必要があります。例えば：

<span id="route1" class="routeSpan" onclick="sendVal(1)">Route 1 Name</span>
<span id="route2" class="routeSpan" onclick="sendVal(2)">Route 2 Name</span>

そしてあなたのJavaScript：

function sendVal(routeVal) {
    $.post('api.php',{route_number:routeVal},function(res){
    $("#mainlayer").html(res);
    });
}

php - JS: リンクのクリックを処理するようにこの関数を変更する

4 に答える 4

Related

Reference