如何爲表單提交事件創建回調（無AJAX）

我希望在我的表單成功提交後有一個回調。這種形式的確不是而是重新加載頁面，並且由於「交叉來源」問題，我們無法使用ajax替代方法。如何爲表單提交事件創建回調（無AJAX）

我現在擁有的是：

$('#uploadform form').on('submit', function(){ 
    // DO STUFF HERE 
});

但這儘快提交事件被觸發，而不是作爲一個回調射擊。如果不使用ajax，我如何在之後運行，並且只有在收到響應（並獲得響應）才能運行代碼？這甚至有可能嗎？

它是通過AWS的S3文件託管並且無法使用JSONP。

我寧願不使用iframe，如果我不必爲簡單起見。

編輯它不重新加載頁面就像文件下載鏈接不重新加載頁面。否則，它完全像其他任何形式。它不是在iframe中提交的。這是一種正常形式，但所涉及的標題不需要重新加載頁面。

來源

2012-11-01 Kevin Beal

你可以使用jquery setTimeOut函數在x秒後觸發提交。沒有AJAX我不認爲這可能是頁面不能重新加載。 – Vucko

如何提交表單？如果我們不知道您製作的是什麼類型的請求，我們無法幫助您。您是否在表單上使用目標並將其提交到iframe？ –

@Vucko，它可以通過使用隱藏的iframe作爲表單目標（我之前已經完成了處理帶有文件上傳的表單）。 –

一個解決方案讓我能夠在不重新加載頁面的情況下提交表單，不使用iframe或JSONP，雖然它在技術上可能被視爲AJAX，但它沒有相同的「跨源」問題。

function uploadFile() { 

    var file = document.getElementById('file').files[0]; 
    var fd = new FormData(); 

    fd.append('key', "${filename}"); 
    fd.append("file",file); 

    xhr = new XMLHttpRequest(); 

    xhr.upload.addEventListener("progress", uploadProgress, false); 
    xhr.addEventListener("load", uploadComplete, false); 
    xhr.addEventListener("error", uploadFailed, false); 
    xhr.addEventListener("abort", uploadCanceled, false); 

    xhr.open('POST', 'http://fake-bucket-name.s3-us-west-1.amazonaws.com/', true); //MUST BE LAST LINE BEFORE YOU SEND 

    xhr.send(fd); 
} 

function uploadProgress(evt) { 
    if (evt.lengthComputable) { 
     var percentComplete = Math.round(evt.loaded * 100/evt.total); 
     document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%'; 
    } 
    else { 
     document.getElementById('progressNumber').innerHTML = 'unable to compute'; 
    } 
} 

function uploadComplete(evt) { 
    /* This event is raised when the server send back a response */ 
    alert("Done - " + evt.target.responseText); 
} 

function uploadFailed(evt) { 
    alert("There was an error attempting to upload the file." + evt); 
} 

function uploadCanceled(evt) { 
    alert("The upload has been canceled by the user or the browser dropped the connection."); 
}

用一個簡單的形式是這樣的：

<form id="form1" enctype="multipart/form-data" method="post"> 
    <div class="row"> 
     <label for="file">Select a File to Upload</label><br> 
     <input type="file" name="file" id="file"> 
    </div> 
    <div id="fileName"></div> 
    <div id="fileSize"></div> 
    <div id="fileType"></div> 
    <div class="row"> 
     <input type="button" onclick="uploadFile()" value="Upload"> 
    </div> 
    <div id="progressNumber"></div> 
</form>

的uploadComplete(evt)函數爲回調。正如你所看到的，它也給你完成你可以顯示你的用戶的百分比。

注意：爲此，您必須在您的S3帳戶中設置正確的上傳策略和CORS 策略。 - RonSper

來源

2012-11-02 04:51:11

注意：爲此，您必須在您的S3帳戶中設置正確的上傳策略和CORS策略。 – RonSper

如果您需要訪問響應，您將同樣遇到與ajax和iframe相同的「交叉來源」問題。

JSONP是解決您的「跨源」問題的唯一方法。這是所有託管在不同域中的JSON API使用的內容，除非您嘗試使用舊版IE中不支持的CORS。

如果您可以控制提交表單的服務器，您應該能夠使其返回JSONP兼容響應。如果不是，你有點不幸。

來源

2012-11-01 23:49:53 pseudosavant

我們提交的地點是我們的S3帳戶。我不確定JSONP是否會與他們合作。我會檢查他們的文檔。（我與Kevin一起工作） – RonSper

不，S3不支持JSONP響應。沒有骰子。 – RonSper

如何爲表單提交事件創建回調（無AJAX）

回答

相關問題