利用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("该客户编号可用!");
}
}
时间： 2024-09-19 09:04:32

利用iframe与ajax无刷新表单提交的相关文章

简单的jquery无刷新表单提交实例

例子1 HTML文件:  代码如下 复制代码 <!DOCTYPE html> <html> <head>   <script src="/jquery-latest.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body&g

js动态创建上传表单通过iframe模拟Ajax无刷新的具体实现

 这篇文章主要介绍了js动态创建上传表单通过iframe模拟Ajax无刷新的具体实现,需要的朋友可以参考下  代码如下: <script>  window.onload=function(){  upfile('file.php');  }      /*  ** url 路径  **/  function upfile(url){  //创建iframe  var iframe = document.createElement("iframe");  document.b

Ajax+FormData+javascript实现无刷新表单信息提交_javascript技巧

原理: dom收集表单信息,利用FormData快速收集表单信息 ,实例化表单数据对象 同时收集fm的表单域信息. var fd = new FormData(fm); //实例化对象 alert(fd); fd对象内部有收集的form表单域信息 ajax传递表单信息 1.静态显示页面代码 <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="t

jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码_jquery

本文实例讲述了jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码.分享给大家供大家参考.具体如下: 这里实现圆角表单,圆角输入框,无刷新验证,漂亮唯美,是对这款基于HTML5/CSS3/jQuery来实现的表单效果的简要概括,用HTML5可以实现很多超乎寻常的效果,从此你会喜欢上HTML5,会骂一下万恶的IE,到现在IE8还不支持HTML5,正悲哀着呢. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-htm

后端服务-ajax无法把表单提交到servlet

问题描述 ajax无法把表单提交到servlet 下面是js里的代码,在html中点submit,会alert出"aaa",但是就是无法提交到servlet里 $(function() { alert("aaa"); $('#button1').click(function() { $.ajax({ type : 'Post',// 数据发送方式 url : '/BookSystem/bookser',// 后台处理程序的页面路径 data : $('signupf

php无刷新利用iframe实现页面无刷新上传文件(1/2)

利用form表单的target属性和iframe 一.上传文件的一个php教程方法. 该方法接受一个$file参数,该参数为从客户端获取的$_files变量,返回重新命名后的文件名,如果上传失败,则返回空字符串. php代码     function uploadfile($file) {         // 上传路径     $destinationpath = "./upload/";         if (!file_exists($destinationpath)){   

ajax无刷新保存用户提交数据

们继续我们的修改用户资料,修改用户资料,首先第一个需要我们做的就是,先显示出所有的用户信息. 最新的网站结构,下面用箭头标注的就是今天新增加了几个文件. ShowStudent.htm增加如下代码. <link href="Style/BaseStyle.css教程" rel="stylesheet" type="text/css" /> <script src="Js/BaseJs.js" type=&qu

js iframe实现ajax无刷新文件上传例子

js代码如下  代码如下 复制代码 <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <html xmlns="http://www.111cn.net /1999/xhtml"> <head> <meta http-equiv="Content-Type"

ajax post方式表单提交setRequestHeader报错解决方法

  当我们创建一个异步对象XMLHttpRequest同时post方式向后台传输数据的时候. 我们要设置异步对象的xhr.setRequestHeader成员的值为 XMLHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");否则的话后台是不能接收到传过去的值的.因为在谷歌浏览器的编译器中显示,传值在Request Payload中,这是错误的(如图) --