3

按照这里的示例非常简单的 jQuery 和 PHP Ajax 请求 - 准备使用代码

我已经成功地创建了一个下拉列表，该列表将值传递给外部 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>

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

提前致谢，

  • 丹——
4

4 回答 4

2

创建一个类，捕获其（即您单击的任何链接）的值，然后发布。

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

于 2013-02-25T22:34:00.513 回答
1

我曾希望简单地修复@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);
    });
});
  1. 该示例使用委托事件。它们初始化和消耗最少的内存很便宜。
  2. 该示例处理错误。大多数此类问题的答案都忽略了这一点。发生错误。总是。让人们意识到这一点。当然，抛出 analert()不是您想要做的事情，但它仍然比简单地完全忽略错误要好。
  3. 该示例使用Deferreds（Promises）而不是回调，因为这通常会使代码更简洁。
  4. 我们正在定义回调fill_div_with_response()和handle_error()根闭包，以防止在下次单击时重新定义它们。没有必要喂垃圾收集器。
  5. data 属性提供了最佳替代方案<option value="123">，它可以防止您必须解析href属性以从字符串中提取该数字。
于 2013-02-25T23:14:56.683 回答
1

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

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

于 2013-02-25T23:24:32.630 回答
0

我对您的问题的理解是您拥有的功能很好，您只需要将外观更改为下拉列表中的一段文本。如果是这样，好消息！您可以保持（几乎）相同的 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);
    });
}
于 2013-02-25T22:49:22.253 回答