Ajax提交表单 

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

 

posted @ 2012-11-04 09:33  Joyce-Lee  阅读(262)  评论(0)    收藏  举报