ajax 提交表单

ajax 提交表单

这个可以获取到表单的所有内容，然后提交。

form 这个参数是表单的id值。不知道怎么直接把表单对象传递进来，而不需要用getElementByID去获取。

需要建立一个loading的层

 1 function ajaxSubmitForm(form, resultDivId) {
 2 form=document.getElementById(form);
 3 var elements = form.elements;// Enumeration the form elements            
 4 var element;            
 5 var i;            
 6 var postContent = "";// Form contents need to submit           
 7 for(i=0;i<elements.length;++i) {                    
 8 var element=elements[i];            
 9 if(element.type=="text" || element.type=="textarea" || element.type=="hidden") {            
10 postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";            
11 }            
12 else if(element.type=="select-one"||element.type=="select-multiple") {            
13 var options=element.options,j,item;            
14 for(j=0;j<options.length;++j){            
15 item=options[j];            
16 if(item.selected) {                    
17 postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(item.value) + "&";                            
18 }            
19 }            
20 } else if(element.type=="checkbox"||element.type=="radio") {            
21 if(element.checked) {                            
22 postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";                         
23 }                  
24 } else if(element.type=="file") {                          
25 if(element.value != "") {                                  
26 postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";                         
27 }                  
28 } else {                                  
29 postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";                
30 }            
31 }            
32 //alert(postContent);            
33 ajaxSubmit(form.action, form.method, postContent);            
34 }            
35 // url - the url to do submit            
36 // method - "get" or "post"            
37 // postContent - the string with values to be submited            
38 // resultDivId - the division of which to display result text in, in null, then            
39 // create an element and add it to the end of the body           
40 function ajaxSubmit(url, method, postContent, resultDivId)            {            
41 var loadingDiv = document.getElementById('loading');                
42 // call in new thread to allow ui to update                   
43 window.setTimeout(function () {                          
44 loadingDiv.innerText = "Loading.";                       
45 loadingDiv.style.display = "";              
46 }, 1000);                
47 // code for Mozilla, etc.            
48 if (window.XMLHttpRequest)                {                          
49 xmlhttp=new XMLHttpRequest();             
50 }                  
51 // code for IE               
52 else if (window.ActiveXObject)                    {
53 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");                   
54 }                  
55 if(xmlhttp) {                     
56     xmlhttp.onreadystatechange = function() {                                
57     // if xmlhttp shows "loaded"                                
58         if (xmlhttp.readyState==4)                                   {
59             if(resultDivId) {                                                
60                 document.getElementByID(resultDivId).innerHTML = xmlhttp.responseText;                                    
61             } 
62             else {            
63                 var result = document.createElement("DIV");           
64                 result.style.border="1px solid #363636";            
65                 result.innerHTML = xmlhttp.responseText;           
66                 document.body.appendChild(result);                                      
67             }                                          
68         loadingDiv.innerHTML = "Submit finnished!";                              
69         }                          
70     };                        
71     if(method.toLowerCase() == "get") {                               
72         xmlhttp.open("GET", url + "?" + postContent, true);                                 
73         xmlhttp.send(null);                       
74     }
75     else if(method.toLowerCase() == "post") {   
76         xmlhttp.open("POST", url, true);   
77         xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");   
78         xmlhttp.send(postContent);     
79     }            
80 } else {    
81     loadingDiv.innerHTML = "Can't create XMLHttpRequest object, please check your web         browser.";    
82 }       
83 }
84 
85