如何为表单提交事件创建回调（无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）

回答

相关问题