Question

我有一个Javascript文件，它有一个所有页面都使用的ajaxStart函数。

我的问题是我只希望选择的页面通过按钮点击访问ajaxStart。我该如何实现呢？

JS：

$(document).ready(function()
{
    $(document).ajaxStart(function()
    {
        $("#overlay").css
        ({
        "display"           : "block",
        "background-color"  : "rgba(255, 255, 255, 0.4)",
        "width"             : $(document).width(), 
        "height"            : $(document).height(),
        "position"          : "absolute",
        "z-index"           : 99999 
        })
    });
    $(document).ajaxComplete(function()
    {
        $("#overlay").css("display", "none");
    });
});

HTML：

<div id="overlay" style="display:none">
    <img src='loading.gif'/>
</div>

上面的代码在点击按钮时显示div内的加载gif。按钮单击功能位于不同的HTML页面中。

Answer 1

我不太清楚你是否想要点击按钮上的叠加点击另外触发点击按钮功能或代替它。

无论哪种方式，你都可以通过Button触发它：

HTML：

<button onclick="overlay()">Click me for Overlay</button>

JS：

function overlay(){
    $(document).ajaxStart(function()
    {
        $("#overlay").css
        ({
        "display"           : "block",
        "background-color"  : "rgba(255, 255, 255, 0.4)",
        "width"             : $(document).width(), 
        "height"            : $(document).height(),
        "position"          : "absolute",
        "z-index"           : 99999 
        })
    });
    $(document).ajaxComplete(function()
    {
        $("#overlay").css("display", "none");
    });
}

Answer 2

不要将它放在与其他通用脚本相同的脚本中，在本例中是'common.java'。把它放在像'ajaxstart.java'这样的另一个文件中，只将它放在你想要使用的选定页面中。

但是，使用此ajaxStart事件将触发所有页面中的所有任何ajax调用，即使是那些您不想显示css的调用。我建议您在每个ajax调用上手动添加css，例如：

$('.button').click(function() {
    // Button click, calling ajax function
    $("#overlay").css
    ({
    "display"           : "block",
    "background-color"  : "rgba(255, 255, 255, 0.4)",
    "width"             : $(document).width(), 
    "height"            : $(document).height(),
    "position"          : "absolute",
    "z-index"           : 99999 
    });

    $.post('script.php', 
    {
        variable: variable,
        char: char,
    }, function(result) {
        alert(result);
        // When ajax call complete
        $("#overlay").css("display", "none");
    });
});

如何仅通过选定的页面在常见的javascript中执行AjaxStart

2 个答案: