Question

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

但是当表单的action属性是$ _SERVER [＆＃34; PHP_SELF＆＃34;]并且数据在同一文件中使用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页面上提交表单并返回票价div中的数据

将#loadingspinner css设置为

#loading_spinner { display:none; }

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

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

在提交按钮上使用此

onclick="javaScriptFunction();"

并在javaScriptFunction（）

中使用该ajax部分

这是在Google地图中两点之间计算KM的示例

提交表单的进度条（$ _SERVER [＆＃34; PHP_SELF＆＃34;]）

1 个答案: