Question

我提交了一个表单，并通过用加载图像的html替换表单的html来加载同一div中的gif。

我首先提交表单然后加载gif，因为我必须用加载图像替换div的内容（以哪种形式存在）。

日志1,2,3正在打印，正在显示加载图像但表单未提交请帮忙。

<script>
/* javascriptfunction */

Submit_and_loadimage() {


console.log("1");

document.getElementById("form_in_div").submit(); 

 or   

document.forms['form_name'].submit();


console.log("2");
document.getElementById("form_in_div").innerHTML ='LOADING_IMAGE-DIV';

console.log("3");

}

Answer 1

您无法使用普通的javascript轻松完成此操作。发布表单时，表单输入将发送到服务器并刷新页面 - 数据在服务器端处理。也就是说，submit（）函数实际上并没有返回任何内容，它只是将表单数据发送到服务器。

如果你真的想展示这种工作图像Javascript（没有页面刷新），那么你需要使用AJAX，当你开始谈论使用AJAX时，你需要使用图书馆。 jQuery是迄今为止最受欢迎的，也是我个人的最爱。这是一个很棒的jQuery插件，名为Form，它可以完全按照你想要的那样做。

以下是您如何使用jQuery和该插件：

在表单提交上显示您的图片

$('#myForm')
    .ajaxForm({
        url : 'myscript.php', // or whatever
        dataType : 'json',
        success : function (response) {
           // hide your image
        }
    })
;

Answer 2

假设在按钮点击时你正在调用ajax方法

<button onclick="LoadData();"/>

在ajax调用show image和onComplete ajax方法之前隐藏这个图像

function LoadData(){
    $("#loading-image").show();
    $.ajax({
          url: yourURL,
          cache: false,
          success: function(html){
            $("Your div id").append(html);
          },
          complete: function(){
            $("#loading-image").hide();
          }
        });
}

Answer 3

您可以使用ajax提交表单，以便该页面不会重定向。把你的装载＆＃39; .gif＆＃39;隐藏块中某处的图像

<div style="display:none" class="loading">
    <img src="path/to/loading.gif" />
</div>

单击提交按钮时，将此div的显示设置为内联块。然后进行ajax调用。当你从服务器得到响应时，再次隐藏这个div。

使用jquery你可以像

那样做

jQuery('#submitbtn').click(function(){
    jQuery('.loading').show();
    jQuery.post( "test.php", { name: "John", time: "2pm" })
      .done(function( data ) {
        alert( "Data Loaded: " + data );
        jQuery('.loading').hide();
    });
});

Answer 4

然后尝试这个添加div并使其默认隐藏。

<div id="loading">
  <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />     </div>

在页面加载的java脚本中显示div包含加载图像

<script language="javascript" type="text/javascript">
     $(window).load(function() {
     $('#loading').hide();
  });
</script>~

提交表单然后通过javascript显示加载图像

4 个答案: