Nodejs 简单express的json和jsonp调用示例
Nodejs 简单express的json和jsonp调用示例
1.创建环境 cmd express
2.修改代码 app.js
/**
* Module dependencies.
*/
var express = require(‘express’)
, routes = require(’./routes’)
, user = require(’./routes/user’)
, http = require(‘http’)
, path = require(‘path’);
var app = express();
app.configure(function(){
app.set(‘port’, process.env.PORT || 3000);
app.set(‘views’, __dirname + ‘/views’);
app.set(‘view engine’, ‘jade’);
app.use(express.favicon());
app.use(express.logger(‘dev’));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, ‘public’)));
});
app.configure(‘development’, function(){
app.use(express.errorHandler());
});
app.get(’/’, routes.index);
app.get(’/users’, user.list);
app.get(’/jsonp’,function(req,res,next){ #返回jsonp
res.jsonp({status:‘jsonp’});
});
app.get(’/json’,function(req,res,next){ #返回json
res.jsonp({status:‘json’});
});
http.createServer(app).listen(app.get(‘port’), function(){
console.log("Express server listening on port " + app.get(‘port’));
});
3.在public目录下新建，ajax.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<script type="text/javascript">
function get_jsonp() {
$.getJSON("http://127.0.0.1:3000/jsonp?callback=?", #跨域调用
function(data) {
$('#rjsonp').val('Jsonp info : ' + data.status);
});
}
function get_json(){ #Json调用
$.getJSON("json",
function(data) {
$('#rjson').val('Json info : ' + data.status);
});
}
</script>
<a href="javascript:get_jsonp();">Click me for jsonp</a><br />
<textarea id="rjsonp" cols="50" rows="3"></textarea>
<a href="javascript:get_json();">Click me for jsonp</a><br />
<textarea id="rjson" cols="50" rows="3"></textarea>
</body>
</html>
4.测试
输入网址http://127.0.0.1:3000/ajax.html
Node.js 简单 Express 的 JSON 和 JSONP 调用示例
1. 创建环境
首先，我们需要创建一个 Express 应用程序。你可以使用以下命令来生成一个新的 Express 项目：
npm install express-generator -g
express myapp
cd myapp
npm install
这将生成一个基本的 Express 项目结构。
2. 修改代码
打开 app.js 文件并进行必要的修改，以便支持 JSON 和 JSONP 响应。
var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');
var app = express();
app.configure(function(){
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
});
app.configure('development', function(){
app.use(express.errorHandler());
});
// 返回 JSONP
app.get('/jsonp', function(req, res, next) {
res.jsonp({ status: 'jsonp' });
});
// 返回 JSON
app.get('/json', function(req, res, next) {
res.json({ status: 'json' });
});
http.createServer(app).listen(app.get('port'), function(){
console.log("Express server listening on port " + app.get('port'));
});
3. 在 public 目录下新建 ajax.html
在 public 目录下新建一个 ajax.html 文件，并添加以下 HTML 和 JavaScript 代码：
<!DOCTYPE html>
<html>
<head>
<title>JSON and JSONP Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<script type="text/javascript">
function get_jsonp() {
$.getJSON("http://127.0.0.1:3000/jsonp?callback=?", function(data) {
$('#rjsonp').val('Jsonp info: ' + data.status);
});
}
function get_json() {
$.getJSON("/json", function(data) {
$('#rjson').val('Json info: ' + data.status);
});
}
</script>
<a href="javascript:get_jsonp();">Click me for JSONP</a><br />
<textarea id="rjsonp" cols="50" rows="3"></textarea>
<a href="javascript:get_json();">Click me for JSON</a><br />
<textarea id="rjson" cols="50" rows="3"></textarea>
</body>
</html>
4. 测试
启动你的 Express 应用程序：
node app.js
然后在浏览器中访问 http://127.0.0.1:3000/ajax.html。点击按钮，你应该会看到相应的 JSON 和 JSONP 数据显示在文本框中。
这样，你就成功地创建了一个简单的 Express 应用程序，能够处理 JSON 和 JSONP 请求。
jsonp的服务器回调函数，默认为callback，如果不取名字的时候，会随即生成 细节可参考 http://developer.51cto.com/art/201105/264791.htm?1364185021
app.use(express.static(path.join(__dirname, ‘public’)));
留意这一段代码，这段代码的作用，就是告诉服务器，我的静态资源文件都存放在代码目录下public目录
Node.js 简单 Express 的 JSON 和 JSONP 调用示例
为了实现一个简单的 Express 应用程序来演示如何返回 JSON 和 JSONP 响应，你可以参考以下步骤和代码示例。
1. 创建项目环境
首先，确保你已经安装了 Node.js 和 npm。然后使用 express-generator 创建一个新的 Express 项目：
npm install -g express-generator
express myproject
cd myproject
npm install
2. 修改 app.js
在 app.js 文件中添加两个路由处理函数，分别用于返回 JSON 和 JSONP 响应：
var express = require('express');
var app = express();
app.get('/json', function (req, res) {
res.json({ status: 'json' });
});
app.get('/jsonp', function (req, res) {
res.jsonp({ status: 'jsonp' });
});
app.listen(3000, function () {
console.log('App is running on http://localhost:3000');
});
3. 在 public 目录下新建 ajax.html
在 public 目录下创建一个名为 ajax.html 的文件，并添加以下内容：
<!DOCTYPE html>
<html>
<head>
<title>JSON and JSONP Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<script type="text/javascript">
function getJson() {
$.getJSON("/json", function(data) {
$('#resultJson').val('JSON info: ' + data.status);
});
}
function getJsonp() {
$.getJSON("http://localhost:3000/jsonp?callback=?", function(data) {
$('#resultJsonp').val('JSONP info: ' + data.status);
});
}
</script>
<a href="javascript:getJson();">Click me for JSON</a><br />
<textarea id="resultJson" cols="50" rows="3"></textarea><br />
<a href="javascript:getJsonp();">Click me for JSONP</a><br />
<textarea id="resultJsonp" cols="50" rows="3"></textarea>
</body>
</html>
4. 测试
启动你的应用：
npm start
然后在浏览器中访问 http://localhost:3000/ajax.html。点击按钮，查看 JSON 和 JSONP 的结果。
总结
以上代码展示了如何在 Express 中设置两个路由来返回 JSON 和 JSONP 响应，并通过 jQuery 实现前端请求。JSONP 主要用于解决跨域请求问题。
