咱们的目标是制作基于高德地图API的地图数据编辑工具，地图编辑页面应该是html+js的，因为基于vue封装欠缺的高德地图组件目前还没有。
html如何与node.js通信呢？解决了这一问题，咱们就能够将在html中调用高德API采集的坐标数据传递给node.js server，再通过node.js调用微信小程序数据API来保留或读取小程序数据库。
看下上面的例子：
//page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" id="username" placeholder="请输出用户名">
<button id="bt">提交</button>
<h1 id="test"></h1>
<script src="page.js"></script>
</body>
</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 名字：
发表回复