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

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