2016-08-03 56 views
1

我在試圖找出如何使進度條可視化正在提交的表單的進度。現在我發現了很多文章,通過AJAX/jQuery將數據提交給一個單獨的php文件,其中正在解析數據。

但是,當表單的action屬性是$ _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> 
+0

您需要使用AJAX和XHR對象。提交URL的位置在哪裏並不重要:)。您可以在表單觸發成功事件後手動啓動刷新。 –

+0

'$ _SERVER [「PHP_SELF」]'方法使用發佈數據重新加載當前頁面。您需要創建另一個端點來通過ajax提交數據。同時你的數據正在加載,你可以顯示進度條。 –

+0

以上兩條評論不正確。在沒有Ajax的情況下做這件事有一些尷尬的方法,但它們實際上只是在ajax文件上傳得到廣泛支持之前的一段歷史。所有仍然需要以某種方式使用JavaScript - 你是否嘗試頂級支持古代瀏覽器?如果沒有,ajax文件上傳是迄今爲止最好的解決方案 – Steve

回答

0

使用此AJAX函數來調用PHP腳本中的其他頁面

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

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

PHP頁面上提交格式並返回票價格中的數據

set #loadingspinner css to

#loading_spinner { display:none; } 

和使用任何GIF圖像img標籤顯示在提交按鈕使用

onclick="javaScriptFunction();" 

和javaScriptFunction()

這是使用AJAX部分微調

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

在谷歌地圖中計算兩點間KM的示例