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 );
        }
    });
}

我的方法的额外好处（以及你应该做的事情）是这些网址的页面应该没有javascript。因此，如果用户已禁用Javascript，他们的网站将会正常工作，如果确实有javascript，您的网站仍然有效。你的方式，如果一个使用已禁用Javascript你的网站真的坏了。

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

Answer 2

您只需将页面名称作为参数传递即可。见下文：

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`)

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

2 个答案: