Show toolbar

2014年1月20日 星期一

Dynamic Post with Iframe

標題:在JavaScript使用虛擬form送出post並以iframe讀取text
JavaScript (index.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 (index.php):
<?php
$num1 = !empty($_POST['num1']) ? $_POST['num1'] : null;
$num2 = !empty($_POST['num2']) ? $_POST['num2'] : null;
$num3 = rand(0,10);
$num = !empty($_POST['num']) ? $_POST['num'] : null;
$sum = 0;
foreach($num as $value) {
    $sum += $value;
}
$total = $num1 + $num2 + $num3 + $sum;
echo $num1."+".$num2."+".$num3."+".$sum."=".$total;
?>

說明:
使用純JavaScript動態在Head產生Iframe及在Body產生Form送出Post後,呼叫函式取得Text資料。

沒有留言:

張貼留言