您的位置：首页 > Web前端 > Node.js

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

2016-08-04 20:37 1036 查看

关键词：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");
});

注意：

1）因为ajax.html和ajaxjs.js一样位于根目录下，所以设置静态文件的路径为根目录（”./”）。

2）request.body是一个json对象，而不是string。

运行

在cmd命令行工具中打开ajaxtest文件夹，运行ajaxjs.js文件：

$ cd ajaxtest

$ node ajaxjs.js

如图：

在浏览器中输入：http://127.0.0.1:3000/ajax.html，如图：

点击传输按钮，从服务器获得了相应数据{“name”:”张三”,”age”:40}，浏览器如图：

服务器监控如图：

参考资料：

Express 4.x API 中文手册

express 解析post方式下的json参数

node.js post json格式数据到服务器的几种方法

How to consume JSON POST data in an Express application

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： express javascript node ajax json

相关文章推荐

新的分享

章节导航