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

时间：2013-03-29 编辑：简简单单来源：一聚教程网

iframe实现ajax方式表单提交

代码如下

复制代码

test.php 代码：

... code goes here ...
echo "";
?>

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 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 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实现代码

代码如下

复制代码

后台处理代码

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("该客户编号可用!");
}
}

上一个： js利用Image()对象实现图片预加载
下一个： js中kedown,keypress,keyup用法区别

推荐专题

最新下载

热门教程

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

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程