Objective:
I see the title is very long, there are so many functions, in fact, the simplification is a function, asynchronous form submission, only in the asynchronous form submit this large function, can realize the image upload, simulation Ajax technology (in fact, this is the way to achieve a browser-compatible Ajax, here is only a nostalgic, As a technology to play, the following content needs to have a certain JS basis, otherwise it will be more difficult to understand.
Precautions :
This is a method in my Bbank, and now I'm going to extract it as a general method to explain.
Bbank Framework Introduction: http://www.cnblogs.com/bruceli/archive/2010/04/15/bBank.html
Why mention Bbank, because in the following method, we use the judgment of the array of Bbank, the string HTML conversion standard DOM (I introduced this in the last article, click to see details), remove your own method, CSS selector, so you see not unfamiliar, You can write your own way to replace these methods, you can also directly use the Bbank method, you can download Bbank look at the source code.
B$.type.isarray (args) determines whether an array
B$.parsedom (STRs) strings are directly converted to standard DOM objects
b$ (' #bBankAsynFormSubmit_form_1b '). Removeself () Remove oneself
b$ () CSS Selector
principle:
The core is through the IFRAME to complete the asynchronous. In a hidden iframe on the page, the form has an attribute target, set target to be the IFRAME you want to submit asynchronously, then when you submit the form, it is actually using an IFRAME as the submission display carrier, the other content of the page is not refreshed.
In fact, the principle is very simple, since the IFRAME is as a display carrier, then we expand, if the submission of the page is a return value, then the return value will become an IFRAME inside the body of the content, in through the IFRAME to get the contents of the body, is not and Ajax a bit like, This is the earliest method used to implement Asynchrony.
Ajax is a time trigger, since to simulate Ajax, then we also want to trigger events, in fact, is very simple, as long as the use of the onload of the IFRAME loading to complete the event.
implementation:
Code
Copy Code code as follows:
var Asyn = {
Formsubmit:function (args, action, func) {
This.clearcontext ();
This.callback = null;
var subarr = [];
var subarrt = [];
if (B$.type.isarray (args)) {
Subarr = args;
} else {
var tag = Args.tagName.toLowerCase ();
if (tag = = "Form") {for (var i = 0, num = args.childNodes.length i < num; i++) {Subarr.push (args.childnodes[i));}
else {Subarr = [args];}
}
Create Asyn form and Ifroma
var objform = document.createelement ("form");
Objform.action = action;
Objform.target = "bbankasynformsubmit_iframe_1b";
objform.encoding = "Multipart/form-data";
Objform.method = "POST";
Objform.id = "bbankasynformsubmit_form_1b";
ObjForm.style.display = "None";
var objiframe = b$.parsedom (' <iframe id= bbankasynformsubmit_iframe_1b "name=" bbankasynformsubmit_iframe_1b "src= "About:blank" style= "Display:none" onload= "javascript:settimeout (\ ' Asyn.complete ()", "></iframe>") [0];
Add submit value in form
for (var i = 0, num = subarr.length i < num; i++) {
if (!subarr[i].name && subarr[i].nodetype = = 1 && subarr[i].tagname.tolowercase () = = "Input") subarr[i]. Name = "Bbankasynformsubmit_input_1b_" + i;
var input = Subarr[i].clonenode (true);
Subarrt.push (input);
Subarr[i].parentnode.replacechild (input, subarr[i]);
Objform.appendchild (Subarr[i]);
}
Submit
Document.body.appendChild (Objiframe);
Document.body.appendChild (Objform);
Objform.submit ();
Dispose
for (var i = 0, num = subarrt.length i < num; i++) {Subarrt[i].parentnode.replacechild (subarr[i), subarrt[i]);
if (func) This.callback = func;
},
Complete:function () {
var responsetext = "";
try {
var objiframe = document.getElementById ("bbankasynformsubmit_iframe_1b");
if (Objiframe.contentwindow) {responsetext = ObjIframe.contentWindow.document.body.innerHTML;}
else {responsetext = ObjIframe.contentDocument.document.body.innerHTML;}
The catch (err) {}
This.clearcontext ();
if (this.callback) this.callback (responsetext);
},
Clearcontext:function () {
if (b$ (' #bBankAsynFormSubmit_form_1b ')) b$ (' #bBankAsynFormSubmit_form_1b '). Removeself ();
if (b$ (' #bBankAsynFormSubmit_iframe_1b ')) b$ (' #bBankAsynFormSubmit_iframe_1b '). Removeself ();
},
Callback:null
};
Brief explanation:
In fact, it is more troublesome to deal with the multiple browser compatibility problem, in fact, we do not have to go to a dead point to discuss the compatibility of IFRAME, we put the compatibility to the browser to resolve and solve their own, where the use of the string to the DOM.
First I created a form and an IFRAME, all hidden, and turned the contents of the form to the hidden form I created, submitting the hidden form that was created. When all is done, the form and the IFRAME that were created are removed.
Use:
Asyn.formsubmit (args, action [, Func]) ARG: Can be a form form, an input form element, an input table cell prime group. Action: the submitted URL. Func: Callback function
Example: Asyn.formsubmit (Inputarr, ' xxx.aspx ', function (d) {
alert (d);
});
End
Here is the end, here to recommend a my own written JS framework, the above method is integrated in the framework of the
Use:
Copy Code code as follows:
B$.asyn.formsubmit (Inputarr, ' xxx.aspx ', function (d) {
alert (d);
});
