Show toolbar

2014年5月5日 星期一

AJAX send POST, GET, FILE and get JSON

標題:AJAX送出POST/GET/FILE並取得JSON資訊
HTML (index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-TW" xml:lang="zh-TW">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Send Post</title>
<script type="text/javascript">
var sendPost = function() {
    this.current = null;
    this.queue = [];
};
sendPost.prototype.request = function(q) {
    var self = this;
    var query = [];
    var formdata = new FormData(document.createElement('form'));
    for(key in q.params) {
        switch(q.params[key].constructor) {
            case Number:
                formdata.append(key, q.params[key]);
                break;
            case String:
                formdata.append(key, q.params[key]);
                break;
            case Array:
                for(var i=0;i<q.params[key].length;i++) {
                    formdata.append(key, q.params[key][i]);
                }
                break;
            default:
                var type = q.params[key].getAttribute("type");
                if(type == 'file') {
                    for(var i=0;i<q.params[key].files.length;i++) {
                        formdata.append(key, q.params[key].files[i]);
                    }
                } else if(type=='password'||type=='text'||type=='hidden') {
                    formdata.append(key, q.params[key].value);
                }
                break;
        }
    }
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType('application/json');
    xobj.open('POST', q.url, true);
    xobj.onreadystatechange = function () {
        if (xobj.readyState == 4 && xobj.status == '200') {
            self.current.load(JSON.parse(xobj.responseText));
            self.action();
        }
    };
    this.queue.push({
        xobj : xobj,
        formdata : formdata,
        load : q.load
    });
    if(!this.current) this.action();
};
sendPost.prototype.action = function() {
    this.current = null;
    if(this.queue.length) {
        this.current = this.queue.shift();
        this.current.xobj.send(this.current.formdata);
    }
};
window.onload = function() {
    document.getElementById('btn').onclick = function() {
        var mySendPost = new sendPost();
        mySendPost.request({
            url : '/test?method=work',
            params : {
                'file' : document.getElementById('myfile'),
                'name' : document.getElementById('myname'),
                'password' : document.getElementById('mypassword'),
                'hidden' : document.getElementById('myhidden'),
                'str' : 'Hello',
                'num1' : 20,
                'num2' : new Array(30, 40)
            },
            load : function(data) {
                document.getElementById('output').innerHTML = JSON.stringify(data, null, 2);
            }
        });
    };
};
</script>
</head>
<body>
<input type="file" id="myfile" multiple="multiple" /><br />
<input type="text" id="myname" value="QQBoxy" /><br />
<input type="password" id="mypassword" value="abcd1234" /><br />
<input type="hidden" id="myhidden" value="HideBoxy" />
<button id="btn">Button</button><br />
<pre id="output"></pre>
</body>
</html>

Node.js (main.js):
var express    = require('./node_modules/express'),
    multiparty = require('./node_modules/multiparty'),
    multipart  = require('./node_modules/connect-multiparty');

var port = 1337;
var app = express();
var multipartMiddleware = multipart();

app.listen(port);
app.use('/', express.static(__dirname + '/html/'));

app.post('/test', multipartMiddleware, function(req, res) {
    res.set('Content-Type', 'application/json;charset=utf-8');
    var json = {
        'get' : req.query,
        'post' : req.body,
        'file' : req.files
    };
    //console.log(JSON.stringify(json, null, 2)); //測試用
    res.send(JSON.stringify(json, null, 2));
});

console.log("Start express server on port %s", port);

範例結果:


說明:
使用FormData方式傳送GET、POST、FILE資訊,
並且建立簡單Node.js伺服器傳回之JSON資訊進行測試,
關於Node.js接收檔案的方法請參考這篇
Google Chrome 34.0.1847.131 m、Firefox 27.0.1、IE11 測試可正常執行。

沒有留言:

張貼留言