node.js与微信小程序后台数据库的交互（2）html与node.js的通信

我们的目的是制作基于高德地图API的地图数据编辑工具，地图编辑页面应该是html+js的，因为基于vue封装完善的高德地图组件目前还没有。

html如何与node.js通信呢？解决了这一问题，我们就可以将在html中调用高德API采集的坐标数据传递给node.js server，再通过node.js调用微信小程序数据API来保存或读取小程序数据库。

看下下面的例子：

//page.html




    
    



    
    提交
    


    

引用的page.js:

//page.js
var test = document.getElementById('test');
var bt = document.getElementById('bt');

bt.onclick = function () {
    var value = document.getElementById('username').value;
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange=function()
    {
        if (xmlHttp.readyState==4 && xmlHttp.status==200)
        {
            test.innerHTML = xmlHttp.responseText;
        }
    };

    xmlHttp.open('POST', 'http://127.0.0.1:3000/', true); 
    xmlHttp.send(value);      //把input框中的value发送过去
};

注意：上面的page页和node.js无关，我们可以用tomcat来进行发布。
接下来我们在http://127.0.0.1:3000/ 的端口创建一个node.js服务：

//app.js
var http = require('http');

var server = http.createServer(function (req, res) {
    var body = '';
    req.on('data', function(data) {      // 接收客户端发送过来的数据， 也就是 xmlHttp.send(value);
        body += data;
    });

    req.on('end', function() {
        res.writeHeader(200, {
            'Content-Type': 'text/plain',
            'Access-Control-Allow-Origin': '*'    //解决跨域问题
        });
        res.write("hello:" + body);
        res.end();
    })
});

server.listen(3000, function () {
    console.log('server start at localhost:3000');
});

首先命令行启动node.js服务：

node app.js

然后在浏览器里访问网址127.0.0.1:3000
在页面的文本框里输入名字，页面显示hello 名字：