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