php - JS : Changing this function to handle a link click

Question

按照这里的例子Very Simple jQuery and PHP Ajax Request – Ready to use code

我已经成功地创建了一个下拉列表，该列表将值传递给外部 PHP 脚本并将 HTML 输出返回到同一页面上的“div”，并​​且效果很好。

我现在想做的是在单击链接时发布值，而不是构建下拉列表。所以...如果我创建了这个链接:

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

我想将“2”传递给该外部 PHP 脚本，并更改​​“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>

所以，明确地说，我想创建实现相同结果的链接，而不是传递值的下拉菜单。

提前致谢

• 丹-

Answer 1

创建一个类，捕获它的(即您点击的任何链接)值，然后发布。

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

如果不需要从中解析整数(如果字符串足够好)，则不需要第二个变量。您可以只在发布数据中使用 routenumber[1]。

请注意，我修改了 jQuery 以使用 .on()句法。 .click() 是它的简写，但我喜欢使用 .on() 只是因为如果您想做更多事情(例如 mouseenter/mouseleave)，它可以减少潜在的代码编写，因为您可以将它们组合成一个代码集。