同步表单发布后触发JavaScript事件？

好的，我认为没有一种方法可以做到这一点，不使用iframe，也不通过ajax调用提交表单，但无论如何，我想我会问的

假设我有一个具有以下配置的web服务器

public/
├── file.php
├── index.php
└── myfile.csv

在

index.php

上，我有一个表单。这是一个POST表单，其动作为

file.php

。该表单附带了一个JS事件处理程序，用于在提交时向DOM中插入一些“加载…”文本

index.php 为了完整起见，这里是

myfile.csv

：

myfile.csv 现在，我的问题是：

在我的文件被提供并开始下载之后，我可以删除插入DOM中的“加载…”文本吗

同步表单发布后是否会触发JS事件

---

正如我所说，我认为没有，但我想四处看看。

您在这里所做的似乎是使用浏览器“缓存”继续显示页面，即使浏览器请求了另一个页面，该页面返回了一个文件，而不是要解释的HTML

根据我的经验，我们使用jQueryAjax来显示/隐藏“加载”DIV

（对于非ajax解决方案，向下滚动）

然后在页面底部有一个javascript部分，其中说明：

<script>
//HIDE THE LOADING DIV
getElementById('loading_div').css("display", "none");
</script>

---

然后，他们将看到这个加载div，直到文件被处理完毕，然后是带有重载的页面（但下载对话框将保留）

“我认为如果不使用iframe，就没有办法做到这一点，”

正确-iframe是目前最好的解决方案，而且非常简单。Jusr创建一个隐藏的iframe，将表单操作设置为所述iframe。附加2个js函数-一个是表单提交事件，它显示一个加载div，一个是iframe onload事件，它隐藏了itThanks@Steve。我认为你是对的，你的建议很有道理。我只是想再次检查一下我是否丢失了一些明显的东西。OP正在尝试启动文件下载，这在ajax上不起作用，也不能同时发送文件mime类型头和重定向头

<?php
// Dummy file
$file = 'myfile.csv';

// Simulate heavy calculations...
sleep(3);

if (file_exists($file)) {
    // Download the file
    header('Content-Description: File Transfer');
    header('Content-Type: application/octet-stream');
    header('Content-Disposition: attachment; filename="' . basename($file) . '"');
    header('Expires: 0');
    header('Cache-Control: must-revalidate');
    header('Pragma: public');
    header('Content-Length: ' . filesize($file));
    readfile($file);
    exit;
}
?>

Hello,World

$.ajax({
    url: script_url,
    cache: false,
    async: sync_type,
    type: "POST",
    data: form_data,
    dataType: "html",
    beforeSend: function(jqXHR, settings)
    {
        //BUILD LOADING HTML
        loading_html = '<div class="ajax-loading">&nbsp;</div>';

        //SHOW LOADING
        switch(return_mode)
        {
            case 'append':
                $('#'+container_id).addClass('ajax-loading');
            break;

            case 'prepend':
                $('#'+container_id).addClass('ajax-loading');
            break;

            default:
                $('#'+container_id).html(loading_html);
            break;
        }//END SWITCH RETURN MODE

    },//END FUNCTION BEFORESEND
    success: function(html_returned, success_code, jqXHR_object) 
    {
        switch(return_mode)
        {
            case 'append':
                //APPEND HTML RESPONSE
                $('#'+container_id).append(html_returned);

            break;

            case 'prepend':
                $('#'+container_id).prepend(html_returned);

            break;

            default:
                //REPLACE CONTAINER CONTENTS WITH HTML RESPONSE
                $('#'+container_id).html(html_returned);

            break;
        }//END SWITCH RETURN MODE

    },//END FUNCTION SUCCESS
    error: function(jqXHR, exception) 
    {

        //SHOW ERRORS 
        if (jqXHR.status === 0) 
        {
            //alert('Not connect.\n Verify Network.');
        } else if (jqXHR.status == 404) 
        {
            //alert('Requested page not found. [404]');
        } else if (jqXHR.status == 500) 
        {
            //alert('Internal Server Error [500].');
        } else if (exception === 'parsererror') 
        {
            //alert('Requested JSON parse failed.');
        } else if (exception === 'timeout') 
        {
            //alert('Time out error.');
        } else if (exception === 'abort') 
        {
            //alert('Ajax request aborted.');
        } else {
            //alert('Uncaught Error.\n' + jqXHR.responseText);
        }//END IF JQXHR.STATUS === 0
    },//END FUNCTION ERROR
    complete: function(jqXHR, textStatus)
    {
        //REMOVE LOADING CLASS
        $('#'+container_id).removeClass('ajax-loading');

    }

getElementById('loading_div').css("display", "block");

<script>
//HIDE THE LOADING DIV
getElementById('loading_div').css("display", "none");
</script>

header("Location: my_page_url.php");