PHP-JS：更改此功能以处理链接单击

遵循此处的示例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>

因此,很明显,我想创建一个可以实现相同结果的链接,而不是传递值的下拉列表.

提前致谢,

>丹-

解决方法:

我曾希望简单地修复@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属性以从字符串中提取该数字.

PHP-JS：更改此功能以处理链接单击

相关推荐