点击刷新
本文实现常用的跨域提交，并非ajax提交；
一、HTML表单：
<form id="fm" name="FM" action="server.aspx" method="post" target="ajaxiframe">
<input type="text" name="tit" value="标题" />
<input type="submit" value="提交" />
</form>
提交表单之后，数据传输如下：
二、只是提交还不能满足我们的需求，还必须有服务端的返回值；
这里用setInterval定时取值：
HTML表单：
<form id="fm" name="FM" action="server.aspx" method="post" target="ajaxiframe">
<input type="text" name="tit" value="标题" />
<input type="submit" value="提交" />
</form>
<iframe id="ajaxiframe" name="ajaxiframe" width="0" height="0"></iframe>
JS Code
<script type="text/javascript">
(function (iframe) {
var Timer = setInterval(function () {
if (iframe.contentWindow) {
clearInterval(Timer);
//绑定事件
if (iframe.attachEvent) {
//IE
iframe.attachEvent('onload', function () {
var result = iframe.contentWindow.document.documentElement.innerText;
if (result.length>0) {
alert('提交成功!(' + result + ')');
}
});
} else {
iframe.addEventListener('load', function () {
var result = iframe.contentWindow.document.documentElement.textContent;
if (result.length > 0) {
alert('提交成功!(' + result + ')');
}
})
}
//解除事件
if (iframe.detachEvent) {
iframe.detachEvent('onload', function () { });
} else {
iframe.removeEventListener('load', function () { }, true);
}
}
}, 0);
})(document.getElementById('ajaxiframe'));
</script>
三、结合以上方式，现在来拓展javascript实现；
<form id="fm" name="FM" action="server.aspx" method="post">
<input type="text" name="tit" value="标题" />
<input type="button" value="button" onclick="send(FM);" />
提交结果：<span id="result"></span>
</form>
JS CODE 公共方法：
<script type="text/javascript">
function XMLhttp() {
this.request = null;
this.post = null;
//iframe set
var div = document.createElement('div');
div.innerHTML = '<iframe id="ajaxiframe" name="ajaxiframe" width="0" height="0"></iframe>';
div.style.display = 'none';
document.body.appendChild(div);
var iframe = div.firstChild;
//post set
this.post = function (fm, url, callback) {
if (typeof url == 'function') {
callback = url;
}
if (typeof fm == 'string') {
//字符串提交，实例：ajax.send('a=1&b=2','/server.aspx', function (data) {});
var f = document.createElement('form'); //
f.name = 'ajaxform';
f.target = 'ajaxiframe';
f.method = 'post';
f.action = url;
var ds = fm.split("&");
for (var i = 0; i < ds.length; i++) {
if (ds[i]) {
var v = ds[i];
var el = document.createElement('input');
el.type = 'hidden';
el.name = v.substr(0, v.indexOf('='));
el.value = v.substr(v.indexOf('=') + 1);
f.appendChild(el);
}
}
document.body.appendChild(f);
f.submit();
document.body.removeChild(f);
} else if (typeof fm == 'object') {
//表单提交，实例：ajax.send(document.getElementById('fm'),'/server.aspx', function (data) {});
fm.target = 'ajaxiframe';
if (typeof url == 'string') {
fm.setAttribute('action', url);
}
fm.submit();
if (iframe.contentWindow) {
//绑定事件
if (iframe.attachEvent) {
//IE
iframe.attachEvent('onload', function () {
this.result = iframe.contentWindow.document.documentElement.innerText;
if (typeof callback == "function") {
callback(this.result);
}
});
} else {
iframe.addEventListener('load', function () {
this.result = iframe.contentWindow.document.documentElement.textContent;
if (typeof callback == "function") {
callback(this.result);
}
})
}
//解除事件
if (iframe.detachEvent) {
iframe.detachEvent('onload', function () { });
} else {
iframe.removeEventListener('load', function () { }, true);
}
}
}
}
}
XMLhttp.prototype = {
send: function (fm, url, callback) {
ajax.post(fm, url, callback);
}
}
var ajax = new XMLhttp();
function send(s) {
ajax.send(document.getElementById('fm'), function (data) {
document.getElementById("result").innerHTML = data;
});
ajax.send('tit=string tit','/server.aspx', function (data) {});
}
</script>
© 著作权归作者所有
举报
发表评论
0/200
