在html页面上使用ajax传递json数据到基于express框架（node.js）的服务器

关键词：json node express body-parser ajax与node post方法

简介

json格式简单命了，比XML更易解析，所以在web开发中前后端传送数据经常使用json格式。我们知道node是基于JavaScript的环境，而json是基于JavaScript对象的格式，所以在node中使用json格式甚至都不用进行数据格式的转换，这比java环境中方便快速。下面来讲解一下怎么在html页面上使用ajax传递json数据到基于express框架（node.js）的服务器中。

业务场景

从html页面使用ajax技术（post方法）传送一个json对象到express框架的服务器上。

代码分析

通过cmd命令行工具在系统根目录新建一个文件夹：

$ mkdir ajaxtest

在该文件夹下面建立两个文件：ajax.html，ajaxjs.js。
在cmd命令行工具打开文件夹，并且通过npm安装需要加载的node模块：

$ cd ajaxtest

$ npm install body-parser express fs

1.前端代码(ajax.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
</head>
<body>
<input type="button" value="传输" name="save" id="save_data" onclick="testAjax()">
<div id="out_tip" style="border:1px solid red;height:30px;margin-top:10px;line-height:30px;"></div>
<script>
function testAjax()
{ 
  var text={"name":"张三","age":40}; //这是一个json对象
    var xmlhttp;
  if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      console.log('服务器响应成功');
      document.getElementById("out_tip").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("POST", "http://127.0.0.1:3000/ajaxjs.js", true);
  xmlhttp.setRequestHeader("Content-type","application/json");//需要设置成application/json
  xmlhttp.send(JSON.stringify(text)); //body-parser解析的是字符串，所以需要把json对象转换成字符串
  console.log(text);
  console.log(JSON.stringify(text));
  console.log(typeof JSON.stringify(text));
}
</script>
</body>
</html>

注意：
1）var text={“name”:”张三”,”age”:40}，这是一个json对象。
2）xmlhttp.open(“POST”, “http://127.0.0.1:3000/ajaxjs.js“, true)中第二个参数根据后端服务中的路由自己设置。
3）body-parser接收的参数是string，所以需要先把json对象转换成字符串，xmlhttp.send(JSON.stringify(text))。

2.后端代码(ajaxjs.js)

var express = require('express');
var bodyParser = require('body-parser');
var fs=require("fs");
var app = express();

//通过express.static访问静态文件，这里访问的是ajax.html
app.use(express.static("./"));

app.use(bodyParser.json()); // for parsing application/json
app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded

//路由获取post方式传递的数据
app.post("/ajaxjs.js", function(request, response){
  console.log(request.body);      // this a json object
  response.send(request.body);    // echo the result back
});

app.listen(3000, function() {   //监听http://127.0.0.1:3000端口
    console.log("server start");
});