最小化动态内容的 AJAX/jQuery 函数 - minimizing ajax/jquery functions for dynamic content

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

代码正在工作，但是我为每个菜单项添加一个新功能。我一直在寻找一种简化它的方法。是否可以以某种方式使用一个函数来处理我设置的每个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 );
    });
}

这样的事情似乎更有效。

.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>

爪哇语

$('#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 属性（为什么在 HTML 中使用 onClick（）是一种不好的做法？）

您可以简单地将页面名称作为参数传递。见下文：

.HTML：

   <ul id="mainNav">
        <li><a href="#" onclick="contentAjax('home')">HOME</a></li>
        <li><a href="#" onclick="contentAjax('docs')">DOCS</a></li>
        <li><a href="#" onclick="contentAjax('servers')">SERVERS</a></li>
        <li><a href="#" onclick="contentAjax('monitors')">MONITORS</a></li>
        </ul>

.JS：

    function contentAjax(pageName) {
    var request = $.ajax({
        url: '/resources/templates/' + pagename + '.php',
        type: "GET",
        dataType: "html"
    }).done(function (msg) {
        $("#content").html(msg);
    }).fail(function (jqXHR, textStatus) {
        alert("Request failed: " + textStatus);
    });
    var request2 =
        $.ajax({
            url: '/resources/templates/homerightPanel.php',
            type: "GET",
            dataType: "html"
        }).done(function (msg) {
        $("#rightPanel").html(msg);
    }).fail(function (jqXHR, textStatus) {
        alert("Request failed: " + textStatus);
    });
}

作为旁注，如果你的home right panel在所有页面上都是一样的，我建议你通过PHP简单地将其包含在其他页面中，而不是通过AJAX调用它。这将使您的网站加载速度更快。

//For example in /docs.php, add:
include_once(`homerightPanel.php`)