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

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

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

看下下面的例子：//page.html

Document

提交

引用的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 名字：