问题
I have a form, basically to upload a file. I am submitting the form twice, 1 without multipart and the 2nd 1 with multipart.
<input type="button" tabindex="5" value="Create" id="btnS" class="btn" onClick="submitForm(this.form,'/test/upload'); return false;" />
//1st submission
form.setAttribute("action",url_action);
form.setAttribute("method","post");
form.submit();
//2nd submission
form.setAttribute("action",url_action);
form.setAttribute("method","post");
form.setAttribute("enctype","multipart/form-data");
form.setAttribute("encoding","multipart/form-data");
form.submit();
but instead I want to 1st check if the 1st form submission is successful then go for 2nd submition
Edited after referring @Vern
var postString = getPostString();
var client=new XMLHttpRequest();
client.onreadystatechange=handler(form,url_action);
client.open("POST",url_action,true);
client.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
client.setRequestHeader("Content-length", postString.length);
client.setRequestHeader("Connection", "close");
client.send(postString);
function handler(form,url_action)
{
if(this.readyState == 4 && this.status == 200) {
//Here submitted is the text that I receive from the servlet If 1st submit is successful
if (xmlhttp.responseText == "submitted"){
secondSend(form,url_action);
} else {
alert("Not good!");
}
}
}
function getPostString()
{
}
function secondSend(form,url_action)
{
form.setAttribute("action",url_action);
form.setAttribute("method","post");
form.setAttribute("enctype","multipart/form-data");
form.setAttribute("encoding","multipart/form-data");
form.submit();
}
Here is my servlet part. where I am identifying if its multipart or not. If not store the resultType to a session variable then return submitted,
Now I want to check for this "submitted" or similar and go for submitting the form 2nd time.
2nd Form submission: Here I will check if its multipart again, and check the session variable and go for CRUD. (This IdentifyNow is basically a kind of request modulator)
public String identifyNow()throws ServletException, java.io.IOException
{
UploadXmlAgent uploadAgent;
boolean isMultipart = ServletFileUpload.isMultipartContent(request);
System.out.println("\n\n*********************************\nisMultipart: "+isMultipart);
if(isMultipart)
{
session=request.getSession(false);
System.out.println("\nThis is multipart and isNew"+session.isNew());
if(session!=null)
{
System.out.println("\ninside session");
requestType=session.getAttribute("resultType").toString();
//Identified based on requestType, instantiate appropriate Handler
//session.invalidate();
if(requestType.equals("Create"))
{
uploadAgent=new UploadXmlAgent(realPath,request,paramMap);
uploadAgent.retrieveXml();
return uploadAgent.uploadXml();
}
else if(requestType.equals("Update"))
{
}
else if(requestType.equals("Delete"))
{
}
}
else
{
return "Session is null";
}
}
else
{
System.out.println("\nNot a multipart");
paramMap=request.getParameterMap();
if (paramMap == null)
throw new ServletException(
"getParameterMap returned null in: " + getClass().getName());
iterator=paramMap.entrySet().iterator();
System.out.println("\n"+paramMap.size());
while(iterator.hasNext())
{
Map.Entry me=(Map.Entry)iterator.next();
if(me.getKey().equals("resultType"))
{
String[] arr=(String[])me.getValue();
requestType=arr[0];
System.out.println("Inside returntype: "+requestType);
}
}
session=request.getSession(true);
session.setAttribute("returntype", requestType);
System.out.println("Session.isNew="+session.isNew());
return "submitted";
}
return "noCreate";
}
Here is Javascript function which is used to submit form twice, look for micoxUpload() function.
/* standard small functions */
function $m(quem){
return document.getElementById(quem)
}
function remove(quem){
quem.parentNode.removeChild(quem);
}
function addEvent(obj, evType, fn){
// elcio.com.br/crossbrowser
if (obj.addEventListener)
obj.addEventListener(evType, fn, true)
if (obj.attachEvent)
obj.attachEvent("on"+evType, fn)
}
function removeEvent( obj, type, fn ) {
if ( obj.detachEvent ) {
obj.detachEvent( 'on'+type, fn );
} else {
obj.removeEventListener( type, fn, false ); }
}
/* THE UPLOAD FUNCTION */
function micoxUpload(form,url_action,id_element,html_show_loading,html_error_http){
/******
* micoxUpload - Submit a form to hidden iframe. Can be used to upload
* Use but dont remove my name. Creative Commons.
* Versão: 1.0 - 03/03/2007 - Tested no FF2.0 IE6.0 e OP9.1
* Author: Micox - Náiron JCG - elmicoxcodes.blogspot.com - micoxjcg@yahoo.com.br
* Parametros:
* form - the form to submit or the ID
* url_action - url to submit the form. like action parameter of forms.
* id_element - element that will receive return of upload.
* html_show_loading - Text (or image) that will be show while loading
* html_error_http - Text (or image) that will be show if HTTP error.
*******/
//testing if 'form' is a html object or a id string
form = typeof(form)=="string"?$m(form):form;
var erro="";
if(form==null || typeof(form)=="undefined"){ erro += "The form of 1st parameter does not exists.\n";}
else if(form.nodeName.toLowerCase()!="form"){ erro += "The form of 1st parameter its not a form.\n";}
if($m(id_element)==null){ erro += "The element of 3rd parameter does not exists.\n";}
if(erro.length>0) {
alert("Error in call micoxUpload:\n" + erro);
return;
}
//creating the iframe
var iframe = document.createElement("iframe");
iframe.setAttribute("id","micox-temp");
iframe.setAttribute("name","micox-temp");
iframe.setAttribute("width","0");
iframe.setAttribute("height","0");
iframe.setAttribute("border","0");
iframe.setAttribute("style","width: 0; height: 0; border: none;");
//add to document
form.parentNode.appendChild(iframe);
window.frames['micox-temp'].name="micox-temp"; //ie sucks
//add event
var carregou = function() {
removeEvent( $m('micox-temp'),"load", carregou);
var cross = "javascript: ";
cross += "window.parent.$m('" + id_element + "').innerHTML = document.body.innerHTML; void(0); ";
$m(id_element).innerHTML = html_error_http;
$m('micox-temp').src = cross;
//del the iframe
setTimeout(function(){ remove($m('micox-temp'))}, 250);
}
addEvent( $m('micox-temp'),"load", carregou)
//properties of form
/*form.setAttribute("target","micox-temp");
form.setAttribute("action",url_action);
form.setAttribute("method","post");*/
//form.submit();
var postString = getPostString();
var client;
if (window.XMLHttpRequest){ // IE7+, Firefox, Chrome, Opera, Safari
client=new XMLHttpRequest();
} else { // IE6, IE5
client=new ActiveXObject("Microsoft.XMLHTTP");
}
//client.onreadystatechange=handler(form,url_action);
client.open("POST",url_action,true);
client.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
client.setRequestHeader("Content-length", postString.length);
client.setRequestHeader("Connection", "close");
client.onreadystatechange = function(){
if (client.readyState==4 && client.status==200){
alert(client.responseText); //This gives back my text from servlet
secondSend(form,url_action);
}
};
client.send($postStr);
alert("1st request send");
//secondSend(form,url_action);
//while loading
if(html_show_loading.length > 0){
$m(id_element).innerHTML = html_show_loading;
}
function getPostString()
{
$postStr=document.getElementsByTagName("confname");
$postStr+=document.getElementsByTagName("returntype");
return $postStr;
}
function secondSend(form,url_action)
{
form.setAttribute("target","micox-temp");
form.setAttribute("action",url_action);
form.setAttribute("method","post");
form.setAttribute("enctype","multipart/form-data");
form.setAttribute("encoding","multipart/form-data");
form.submit();
if(html_show_loading.length > 0){
$m(id_element).innerHTML = html_show_loading;
}
}
}
回答1:
submit() does not have a return value and as such you are not able to check the outcome of the submission just based on your code above.
However, the common way to do it is actually to use Ajax and use a function to set a flag. That way, you can check if the form is successfully submitted. Not to mention, with the server reply, you can further validate if the form has been transmitted correctly to the server :)
Hope it helped. Cheers!
The following code should give you an idea of how to do it:
function first_send(){
// Local Variable
var xmlhttp;
// Create Object
if (window.XMLHttpRequest){ // IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// Set Function
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
// (1) Check reply from server if request has been successfully
// received
// (2) Set flag / Fire-off next function to send
// Example
if (xmlhttp.responseText == "ReceiveSuccess"){
secondSend();
} else {
// Error handling here
}
}
}
// Gets the first set of Data you want to send
var postString = getPostString();
// Send
xmlhttp.open("POST","form1.php",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", postString.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(postString);
}
And you'll need:
function getPostString(){
// Collect data from your form here
}
function secondSend(){
// You can create this function and post like above
// or just do a direct send like your code did
}
Hope it helps (:
This code ought to do the trick, but be sure to fill up with the HTML form that you're using! Also, put the first form in a submission if you require:
<script type="text/javascript">
var postString = getPostString();
var client = new XMLHttpRequest(); // You shouldn't create it this way.
// Open Connection and set the necessary
client.open("POST",url_action,true);
client.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
client.setRequestHeader("Content-length", postString.length);
client.setRequestHeader("Connection", "close");
// Create function
client.onreadystatechange = function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
if (xmlhttp.responseText == "Success") {
secondSend();
} else {
alert('In Error');
}
}
};
client.send(postString);
function getPostString()
{
// Get your postString data from your form here
// Return your Data to post
return $postStr;
}
function secondSend()
{
// Make sure you fill up your form before you post
form.setAttribute("action",url_action);
form.setAttribute("method","post");
form.setAttribute("enctype","multipart/form-data");
form.setAttribute("encoding","multipart/form-data");
form.submit();
}
</script>
回答2:
I am sharing the ajax way of doing it apart from the regular XMLHttpRequest by @Vern
/*CALLING 1st SUBMIT*/
$(function() {
$("#submitButton").click(callme);
function callme() {
var form=document.forms["yourFormID"];
$.ajax({
type: "POST",
url: "/upload",
data: {resulttype: $('#resulttype').val()},
async:false,
complete: function(msg){
micoxUpload(form,'/upload','postUploadInformation','Loading...','Crap! something went wrong'); return false;
}
});
}
});
/* THE UPLOAD FUNCTION */
function micoxUpload(form,url_action,id_element,html_show_loading,html_error_http){
/******
* micoxUpload - Submit a form to hidden iframe. Can be used to upload
* Use but dont remove my name. Creative Commons.
* Versão: 1.0 - 03/03/2007 - Tested no FF2.0 IE6.0 e OP9.1
* Author: Micox - Náiron JCG - elmicoxcodes.blogspot.com - micoxjcg@yahoo.com.br
* Parametros:
* form - the form to submit or the ID
* url_action - url to submit the form. like action parameter of forms.
* id_element - element that will receive return of upload.
* html_show_loading - Text (or image) that will be show while loading
* html_error_http - Text (or image) that will be show if HTTP error.
*******/
//testing if 'form' is a html object or a id string
form = typeof(form)=="string"?$m(form):form;
var erro="";
if(form==null || typeof(form)=="undefined"){ erro += "The form of 1st parameter does not exists.\n";}
else if(form.nodeName.toLowerCase()!="form"){ erro += "The form of 1st parameter its not a form.\n";}
if($m(id_element)==null){ erro += "The element of 3rd parameter does not exists.\n";}
if(erro.length>0) {
alert("Error in call micoxUpload:\n" + erro);
return;
}
//creating the iframe
var iframe = document.createElement("iframe");
iframe.setAttribute("id","micox-temp");
iframe.setAttribute("name","micox-temp");
iframe.setAttribute("width","0");
iframe.setAttribute("height","0");
iframe.setAttribute("border","0");
iframe.setAttribute("style","width: 0; height: 0; border: none;");
//add to document
form.parentNode.appendChild(iframe);
window.frames['micox-temp'].name="micox-temp"; //ie sucks
//add event
var carregou = function() {
removeEvent( $m('micox-temp'),"load", carregou);
var cross = "javascript: ";
cross += "window.parent.$m('" + id_element + "').innerHTML = document.body.innerHTML; void(0); ";
$m(id_element).innerHTML = html_error_http;
$m('micox-temp').src = cross;
//del the iframe
setTimeout(function(){ remove($m('micox-temp'))}, 250);
}
addEvent( $m('micox-temp'),"load", carregou)
secondSend(form,url_action);
//while loading
if(html_show_loading.length > 0){
$m(id_element).innerHTML = html_show_loading;
}
function secondSend(form,url_action)
{
form.setAttribute("target","micox-temp");
form.setAttribute("action",url_action);
form.setAttribute("method","post");
form.setAttribute("enctype","multipart/form-data");
form.setAttribute("encoding","multipart/form-data");
form.submit();
if(html_show_loading.length > 0){
$m(id_element).innerHTML = html_show_loading;
}
}
}
来源：https://stackoverflow.com/questions/5854753/how-do-i-know-if-form-submission-is-successful