JS：更改此功能以处理链接点击

Question

Following the example here Very Simple jQuery and PHP Ajax Request – Ready to use code

I've been successful in creating a drop down list that passes the value to an external PHP script and returns the HTML output back to a "div" on the same page and it works great.

What I want to do now is post values when I click on link instead of building a drop down list. So ...if I created this link:

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

I want "2" passed to that external PHP script and the content changed on the " div " as it currently works with the dropdown. I don't know how to change the javascript to handle this or what "foo.php" really needs to be.

Here's the current javascript from that example:

    <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>

And here's what the dropdown portion of the HTML looks like:

    <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>

So, to be clear, instead of a dropdown that passes values, I want to create links that accomplish the same result.

Thanks in advance,

• dan -

Answer 1

I had hoped simply fixing @LifeInTheGrey's example would've sufficed, but there are some things I would've done differently that probably need some explaining.

Your HTML could look something like this:

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

The JavaScript would look something like this:

$(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);
    });
});

1. The example uses delegated events. They're cheap to initialize and consume the least amount of memory.
2. The example handles errors. Most answers to questions like these neglect that. errors happen. Always. Make people aware of that. Surely throwing an alert() is not the thing you want to be doing, but it's still better than simply ignoring errors completely.
3. The example uses Deferreds (Promises) rather than callbacks, as this usually makes code much cleaner.
4. We're defining the callbacks fill_div_with_response() and handle_error() at the root closure to prevent redefining them on the next click. There's no need to feed the garbage collector.
5. The data attribute poses the optimal alternative to <option value="123"> in the way that it prevents you from having to parse the href attribute to extract that number from a string.