標題:虛擬表單送出
JavaScript (inidex.html):
<button id="test">test</button>
<div id="show">show</div>
<script type="text/javascript">
function $(id) {
switch(id.substr(0,1)) {
case '#':
return document.getElementById(id.substr(1));
case '.':
var elems = document.body.getElementsByTagName('*');
var target = id.substr(1);
var result=[];
for(i=0;j=elems[i];i++) {
if((j.className).indexOf(target)!=-1) result.push(j);
}
return result;
default:
return document.getElementsByTagName(id);
}
}
var loadpost = {
current : null,
queue : [],
request : function(q) {
//Create iframe
try { //IE
var iframe = document.createElement('<iframe name="loadboxy">');
} catch (e) {
var iframe = document.createElement('iframe');
}
iframe.style.display = 'none';
iframe.name = 'loadboxy';
iframe.id = 'loadboxy';
if(iframe.attachEvent) {
iframe.attachEvent("onload", function(){
loadpost.load();
});
} else {
iframe.onload = function(){
loadpost.load();
};
}
//Create form
var form = document.createElement('form');
form.target = 'loadboxy';
form.action = q.url;
form.method = 'post';
form.style.display = 'none';
for(var key in q.param) {
if(q.param[key].constructor == Array) {
for(var i=0;i<q.param[key].length;i++) {
var input = document.createElement('input');
input.type = 'hidden';
input.name = key;
input.value = q.param[key][i];
form.appendChild(input);
}
} else {
var input = document.createElement('input');
input.type = 'hidden';
input.name = key;
input.value = q.param[key];
form.appendChild(input);
}
}
//Queue
this.queue.push({
form : form,
iframe : iframe,
flag : 0,
load : q.load
});
if (!this.current) this.action();
},
task : function() {
var iFrame = this.current.iframe;
var iFrameBody;
if (iFrame.contentDocument) //FF
iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0];
else if (iFrame.contentWindow) //IE
iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0];
this.current.load(iFrameBody.innerHTML);
},
load : function() {
if(this.current.flag == 1) {
this.task();
$('body')[0].removeChild(this.current.iframe);
$('body')[0].removeChild(this.current.form);
this.action();
} else {
this.current.flag = 1;
this.send();
}
},
action : function() {
this.current = null;
if(this.queue.length) {
this.current = this.queue.shift();
$('body')[0].appendChild(this.current.iframe);
}
},
send : function() {
$('body')[0].appendChild(this.current.form);
this.current.form.submit();
}
};
$('#test').onclick = function() {
loadpost.request({
url : "action.php",
param : {
'num1' : 10,
'num2' : 20,
'num[]' : new Array(30, 40)
},
load : function(data) {
$('#show').innerHTML = data;
}
});
};
</script>
PHP (action.php):
<?php
$num1 = !empty($_POST['num1']) ? $_POST['num1'] : null;
$num2 = !empty($_POST['num2']) ? $_POST['num2'] : null;
$total = $num1 + $num2;
echo $num1."+".$num2."=".$total;
?>
說明:
純JavaScript產生虛擬form、iframe並發送POST訊息取得php傳回之內容。