网站地图    收藏   

主页 > 前端 > javascript >

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

来源:自学PHP网    时间:2014-09-19 14:47 作者: 阅读:

[导读] 无刷新表单提交的方法有很多种,下面我来来介绍一种利用iframe与ajax几种方式表单提交实例,有需要的朋友可参考参考。...

iframe实现ajax方式表单提交

 代码如下 复制代码

<html>
<head>
<script type="text/javascript">
function test(msg){
 alert(msg);
}
</script>
</head>
<body>
<form action="test.php" enctype="multipart/form-data" method="post" target='hidden_iframe'>
 <input type="file" id="file" name="file" />
 <input type="submit" value="submit" /></form><iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" ></iframe>
</body></html>

test.php 代码:

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

ajax 提交表单

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

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

需要建立一个loading的层

 

 代码如下 复制代码
 function ajaxSubmitForm(form, resultDivId) {
 form=document.getElementById(form);
 var elements = form.elements;// Enumeration the form elements           
 var element;           
 var i;           
 var postContent = "";// Form contents need to submit          
 for(i=0;i<elements.length;++i) {                   
 var element=elements[i];           
 if(element.type=="text" || element.type=="textarea" || element.type=="hidden") {           
 postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";           
 }           
 else if(element.type=="select-one"||element.type=="select-multiple") {           
 var options=element.options,j,item;           
 for(j=0;j<options.length;++j){           
 item=options[j];           
 if(item.selected) {                   
 postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(item.value) + "&";                           
 }           
 }           
 } else if(element.type=="checkbox"||element.type=="radio") {           
 if(element.checked) {                           
 postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";                        
 }                 
 } else if(element.type=="file") {                         
 if(element.value != "") {                                 
 postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";                        
 }                 
 } else {                                 
 postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";               
 }           
 }           
 //alert(postContent);           
 ajaxSubmit(form.action, form.method, postContent);           
 }           
       
 function ajaxSubmit(url, method, postContent, resultDivId)            {           
 var loadingDiv = document.getElementById('loading');               
                 
 window.setTimeout(function () {                         
 loadingDiv.innerText = "Loading.";                      
 loadingDiv.style.display = "";             
 }, 1000);               
 // code for Mozilla, etc.           
 if (window.XMLHttpRequest)                {                         
 xmlhttp=new XMLHttpRequest();            
 }                 
 // code for IE              
 else if (window.ActiveXObject)                    {
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");                  
 }                 
 if(xmlhttp) {                    
     xmlhttp.onreadystatechange = function() {                               
     // if xmlhttp shows "loaded"                               
         if (xmlhttp.readyState==4)                                   {
             if(resultDivId) {                                               
                 document.getElementByID(resultDivId).innerHTML = xmlhttp.responseText;                                   
             }
             else {           
                 var result = document.createElement("DIV");          
                 result.style.border="1px solid #363636";           
                 result.innerHTML = xmlhttp.responseText;          
                 document.body.appendChild(result);                                     
             }                                         
         loadingDiv.innerHTML = "Submit finnished!";                             
         }                         
     };                       
     if(method.toLowerCase() == "get") {                              
         xmlhttp.open("GET", url + "?" + postContent, true);                                
         xmlhttp.send(null);                      
     }
     else if(method.toLowerCase() == "post") {  
         xmlhttp.open("POST", url, true);  
         xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
         xmlhttp.send(postContent);    
     }           
 } else {   
     loadingDiv.innerHTML = "Can't create XMLHttpRequest object, please check your web         browser.";   
 }      
 }

jquery实现代码

 

 代码如下 复制代码

<script type ="text/javascript" src ="../js/jquery.js"></script>
<script type="text/javascript">
function checkCorpID()//检测客户编号是否可用
{
if($.trim($("#txtF_CORPID")[0].value)=="")//txtF_CORPID是客户编号输入框
{
alert("请输入客户编号!");
}
else
{
$("#checkFlag").html("正在检测");//显示提示信息
$.ajax({
type: "get",
url: "CheckCorpID.ashx",
data: "ID="+$.trim($("#txtF_CORPID")[0].value),//提交表单,相当于CheckCorpID.ashx?ID=XXX
success: function(msg){$("#checkFlag").html("");alert( msg ); } //操作成功后的操作!msg是后台传过来的值
});
}
}
</script>

后台处理代码


if(context.Request.Params["ID"].ToString()!="")
{
Pxt.Logic.SYS.CORP_BASE_INFO cbiL = new Pxt.Logic.SYS.CORP_BASE_INFO();
bool flag=cbiL.checkCorpID(context.Request.Params["ID"].ToString());
if (flag)
{
context.Response.Write("该客户编号已被占用!");
}
else
{
context.Response.Write("该客户编号可用!");
}
}

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论