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>

因此，需要明确的是，我希望创建能够实现相同结果的链接，而不是传递值的下拉列表。

提前致谢，

dan -

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），它允许更少的潜在编码，因为你可以将它们组合成一个代码集。

Answer 2

我原本希望简单地修复@ 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);
    });
});

该示例使用delegated events。它们初始化和消耗最少的内存都很便宜。
该示例处理错误。这些问题的大多数答案都忽略了这一点。错误发生。总是。让人们意识到这一点。肯定抛出一个alert() 而不是你要做的事情，但它仍然比完全忽略错误更好。
该示例使用Deferreds (Promises)而不是回调，因为这通常会使代码更清晰。
我们在根关闭处定义回调fill_div_with_response()和handle_error()，以防止在下次点击时重新定义它们。没有必要为垃圾收集器提供食物。
数据属性是<option value="123">的最佳替代方式，因为它阻止您必须解析href属性以从字符串中提取该数字。

Answer 3

因为你想制作一个菜单，我会修改你的标记

<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元素，因此您可以在处理过程中添加更多菜单选项，它们仍然有效。这也比对文档的附件更好，因为它是一种更集中的事件附件方法。

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

3 个答案: