夏日博客

A-A+

利用iframe与ajax无刷新表单提交

2016年10月15日 前端设计 暂无评论 阅读 6 views 次

无刷新表单提交的方法有很多种，下面我来来介绍一种利用iframe与ajax几种方式表单提交实例,有需要的朋友可参考参考。
iframe实现ajax方式表单提交,代码如下:

  1. <html>  
  2. <head>  
  3. <script type="text/javascript">  
  4. function test(msg){  
  5.  alert(msg);  
  6. }  
  7. </script>  
  8. </head>  
  9. <body>  
  10. <form action="test.php" enctype="multipart/form-data" method="post" target='hidden_iframe'>  
  11.  <input type="file" id="file" name="file" />  
  12.  <input type="submit" value="submit" /></form><iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" ></iframe>  
  13. </body></html>  

test.php 代码：

  1. <?php  
  2. ... code goes here ...  
  3. echo "<script type='text/javascript'>parent.test('some messages');</script>";  
  4. ?>  

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. }//xiariboke.net  
  35.          
  36. function ajaxSubmit(url, method, postContent, resultDivId)            {              
  37. var loadingDiv = document.getElementById('loading');                  
  38.                    
  39. window.setTimeout(function () {                            
  40. loadingDiv.innerText = "Loading.";                         
  41. loadingDiv.style.display = "";                
  42. }, 1000);                  
  43. // code for Mozilla, etc.              
  44. if (window.XMLHttpRequest)                {                            
  45. xmlhttp=new XMLHttpRequest();               
  46. }                    
  47. // code for IE                 
  48. else if (window.ActiveXObject)                    {  
  49. xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");                     
  50. }                    
  51. if(xmlhttp) {                       
  52.     xmlhttp.onreadystatechange = function() {                                  
  53.     // if xmlhttp shows "loaded"                                  
  54.         if (xmlhttp.readyState==4)                                   {  
  55.             if(resultDivId) {                                                  
  56.                 document.getElementByID(resultDivId).innerHTML = xmlhttp.responseText;                                      
  57.             }   
  58.             else {              
  59.                 var result = document.createElement("DIV");             
  60.                 result.style.border="1px solid #363636";              
  61.                 result.innerHTML = xmlhttp.responseText;             
  62.                 document.body.appendChild(result);                                        
  63.             }                                            
  64.         loadingDiv.innerHTML = "Submit finnished!";                                
  65.         }                            
  66.     };                          
  67.     if(method.toLowerCase() == "get") {                                 
  68.         xmlhttp.open("GET", url + "?" + postContent, true);                                   
  69.         xmlhttp.send(null);                         
  70.     }  
  71.     else if(method.toLowerCase() == "post") {     
  72.         xmlhttp.open("POST", url, true);     
  73.         xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");     
  74.         xmlhttp.send(postContent);       
  75.     }              
  76. } else {      
  77.     loadingDiv.innerHTML = "Can't create XMLHttpRequest object, please check your web         browser.";      
  78. }         
  79. }  

jquery实现代码,代码如下:

  1. <script type ="text/javascript" src ="../js/jquery.js"></script>   
  2. <script type="text/javascript">   
  3. function checkCorpID()//检测客户编号是否可用   
  4. {   
  5. if($.trim($("#txtF_CORPID")[0].value)=="")//txtF_CORPID是客户编号输入框   
  6. {   
  7. alert("请输入客户编号!");   
  8. }   
  9. else   
  10. {   
  11. $("#checkFlag").html("正在检测");//显示提示信息   
  12. $.ajax({   
  13. type: "get",   
  14. url: "CheckCorpID.ashx",   
  15. data: "ID="+$.trim($("#txtF_CORPID")[0].value),//提交表单，相当于CheckCorpID.ashx?ID=XXX   
  16. success: function(msg){$("#checkFlag").html("");alert( msg ); } //操作成功后的操作！msg是后台传过来的值   
  17. });   
  18. }   
  19. }   
  20. </script>  

后台处理代码:

  1. if(context.Request.Params["ID"].ToString()!="")   
  2. {   
  3. Pxt.Logic.SYS.CORP_BASE_INFO cbiL = new Pxt.Logic.SYS.CORP_BASE_INFO();   
  4. bool flag=cbiL.checkCorpID(context.Request.Params["ID"].ToString());   
  5. if (flag)   
  6. {   
  7. context.Response.Write("该客户编号已被占用!");   
  8. }   
  9. else   
  10. {   
  11. context.Response.Write("该客户编号可用!");   
  12. }   
  13. }  
标签：

给我留言