php - 最小化动态内容的 ajax/jquery 函数

Question

我不确定是否要正确动态更新此网站上的内容。随着我更深入地构建网站，我开始意识到我的功能将会变得疯狂......

代码正在运行，但是我正在为每个菜单项添加一个新功能。我一直在寻找一种方法来简化它。是否可以以某种方式使用一个函数来处理我设置的每个 onclick 事件的内容更改？也许是时候拿起一本书了，欢迎任何建议。

HTML:

    <ul id="mainNav">
    <li><a href="#" onclick="contentAjax()">HOME</a></li>
    <li><a href="#" onclick="contentAjaxDocs()">DOCS</a></li>
    <li><a href="#" onclick="contentAjaxServers()">SERVERS</a></li>
    <li><a href="#" onclick="contentAjaxMonitors()">MONITORS</a></li>
    </ul> 

Javascript:

function contentAjax() {
    var request = $.ajax({
    url: '/resources/templates/home.php',
    type: "GET",
    dataType: "html"
    });

    request.done(function(msg) {
        $("#content").html(msg);

    });

    request.fail(function(jqXHR, textStatus) {
        alert( "Request failed: " + textStatus );
    });

    var request2 = 
    $.ajax({
    url: '/resources/templates/homerightPanel.php',
    type: "GET",
    dataType: "html"
    });

    request2.done(function(msg) {
        $("#rightPanel").html(msg);

    });

    request2.fail(function(jqXHR, textStatus) {
        alert( "Request failed: " + textStatus );
    });

}

Answer 1

这样的事情似乎更有效。

HTML

 <ul id="mainNav">
    <li><a href="url/to/home">HOME</a></li>
    <li><a href="url/to/docs">DOCS</a></li>
    <li><a href="url/to/servers">SERVERS</a></li>
    <li><a href="url/to/monitors">MONITORS</a></li>
 </ul> 

Javascript

$('#mainNav li a').click(function(e){
    e.preventDefault(); //So the page doesn't load the URL
    var url = $(this).attr('href');
    contentAjax(url);
});
function contentAjax(url) {
    var request = $.ajax({
        url: url,
        type: "GET",
        dataType: "html",
        success: function(msg){
            $("#content").html(msg);
        },error: function(jqXHR,textStatus){
            alert( "Request failed: " + textStatus );
        }
    });
}

我的方法(以及您应该做的事情的方式)的额外好处是这些 URL 上的页面应该无需 JavaScript 即可工作。因此，如果用户禁用了 Javascript，他们的网站将正常工作，如果用户确实有 Javascript，您的网站仍将正常工作。你的方式，如果一个用户禁用了 Javascript，那么你的网站实际上就被破坏了。

此外，您不应使用 onclick 属性 ( Why is using onClick() in HTML a bad practice? )