javascript - 提交表单的进度条 ($_SERVER ["PHP_SELF"])

Question

我试图找出如何制作一个进度条来可视化正在提交的表单的进度。现在我发现很多文章都通过 AJAX/jQuery 将数据提交到一个单独的 php 文件，并在其中解析数据。

但是，当表单的操作属性为 $_SERVER["PHP_SELF"] 并且正在同一文件中使用 php 处理数据时，我该如何执行此操作。 (按下提交按钮后，页面刷新。)

示例:

<?php
if(isset($_POST['submit']) && !empty($_POST['submit'])){
    // some validation code combined with error_message array here
    // uploading data to server and database here
}
?>

...

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="POST" id="aaa" enctype="multipart/form-data">
    <input type="text" name="title" id="title" size="55" maxlength="55" required>
    <textarea name="description" id="description" maxlength="155" rows="3" cols="55" required></textarea>
    <input type="file" name="images[]" id="file_input">
    <input type="file" name="images[]" id="file_input">
    <input type="file" name="images[]" id="file_input">
    <input type="submit" value="Submit" name="submit" id="submit">
</form>

Answer 1

使用这个ajax函数调用其他页面的php脚本

$('#loading_spinner').show();

    $.post('php_page.php',
{pickup:pickup,dropoff:dropoff,km:km},function(data){
        $('#fare').html(data);
         $('#loading_spinner').hide();
    });

在php页面提交表单并返回fare div中的数据

将 #loadingspinner css 设置为

#loading_spinner { display:none; }

并使用 img 标签中的任何 gif 图像来显示微调器

<img id="loading_spinner" src="ajax-loader.gif">

在提交按钮上使用此

onclick="javaScriptFunction();"

并在 javaScriptFunction() 中使用该 ajax 部分

这是计算Google map 中两点之间KM的示例