在加载数据之前显示 Ajax 加载器答案

【问题标题】：Display Ajax loader before load data在加载数据之前显示 Ajax 加载器
【发布时间】：2012-07-17 04:22:59
【问题描述】：

你好朋友，我想在数据加载之前显示 Ajax 加载器，特别是 div，但问题是数据在同一页面上动态出现，但我的脚本从另一个文件调用数据 Script.php 请参阅下面的代码

脚本

<script>
function loadingAjax(div_id)
{
    $("#"+div_id).html('<img src="ajax-loader.gif"> saving...');
    $.ajax({
        type: "POST",
        url: "script.php",
        data: "name=John&id=28",
        success: function(msg){
            $("#"+div_id).html(msg);
        }
    });
}
</script>

HTML

<body onload="loadingAjax('myDiv');">


<div id="myDiv"></div>

<div id="xyz"><img src="ss/image/abc.jpg" /></div>


</body>

它工作正常，但我想在同一页面中加载数据，请帮助我

提前谢谢....

编辑

我想在将数据 #xyz 加载到 #myDiv 之前显示加载器

【问题讨论】：

有什么问题？您不想从其他页面或其他地方调用 ajax 发布数据吗？

标签： ajax jquery

【解决方案1】：

你可以试试下面的html -

<body onload="loadingAjax('myDiv');">
    <div id="myDiv">
        <img id="loading-image" src="ajax-loader.gif" style="display:none;"/>
    </div>
</body>

和脚本 -

<script>
function loadingAjax(div_id) {
      var divIdHtml = $("#"+div_id).html();
      $.ajax({
           type: "POST",
           url: "script.php",
           data: "name=John&id=28",
           beforeSend: function() {
              $("#loading-image").show();
           },
           success: function(msg) {
              $("#"+div_id).html(divIdHtml + msg);
              $("#loading-image").hide();
           }
      });
}
</script>

【讨论】：

如果你觉得我的回答有用，可以打勾吗？

【解决方案2】：

你可以试试下面的脚本

<script>
function ajax()
{
    var options = {};
    options.url = '';
    options.type = 'post';
    options.data = '';
    options.dataType = 'JSON'; // type data get from sever
    options.contentType = 'application/json';// type data post to sever
    options.async = false;
    options.beforeSend = function () {

    };

    options.success = function (data)
    {

    };
    options.error = function (xhr, status, err) {

        console.log(xhr.responseText);
    };
    $.ajax(options);
}
</script>

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。