jQuery AJAX 访问 REST API JSON 数据
Posted
技术标签:
【中文标题】jQuery AJAX 访问 REST API JSON 数据【英文标题】：jQuery AJAX to access REST API JSON data 【发布时间】：2016-10-26 07:03:33 【问题描述】：我在 http://localhost:3000/api/kfc 上的 node.js、express.js 应用程序中创建了一个 REST API。上面有 JSON 数据。创建它的函数...
router.get('/kfc', function(req, res, next)
var response=
"id":"123",
"name":"name1",
"drink":"drink1"
res.end(JSON.stringify(response));
);
我正在使用来自 http://localhost:8887/kfc.html 的 jQuery AJAX GET 调用来访问它，kfc.html 和 kfcLoad.js 的代码是-
//kfc.html
<html>
<body>
<h3>Order Placed</h3>
<ul id="ulOrder">
<script src="javascripts/jQuery.js"></script>
<script src="javascripts/kfcLoad.js"></script>
</body>
</html>
//kfcLoad.js
$(function()
var $ulOrder=$('#ulOrder');
function addOrder(order)
$ulOrder.append('<li><strong>ID</strong>: '+ order.id+'<br><strong>Name</strong>: '+ order.name+'<br><strong>Drink</strong>: '+order.drink+'<br></li>');
$.ajax(
type: 'GET',
url: 'http://localhost:3000/api/kfc',
dataType: 'jsonp',
success: function(orders)
$.each(orders, function(i, order)
addOrder(order);
);
,
error: function(jqXHR, textStatus, errorThrown)
console.log(textStatus, errorThrown);
);
);
我遇到错误-
jQuery.js:1 Uncaught SyntaxError: Unexpected token <
kfcLoad.js:1 Uncaught SyntaxError: Unexpected token <
【问题讨论】：
json 和 jsonp 不是一回事。您收到的错误表明您也没有收到，而是很可能是返回 html 的错误页面。 不要使用JSON.stringify，只需使用res.json(response)
HTML 页面被渲染，但 json 数据没有显示在上面。我不确切知道 jsonp 是什么，但我在某处阅读时正在使用它，以使用 dataType: 'jsonp' 作为从另一个端口访问的解决方案。当我不使用 jsonp 时，我收到了这个错误-XMLHttpRequest cannot load http://localhost:3000/api/kfc. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
@eblin 它仍然给出这些错误。
在使用它之前研究一下jsonp是什么...... wtf
【参考方案1】：
应该在您的 API 服务器上启用 CORS 以便从另一个端口进行访问。如果您使用Express.js 启用此功能，您可以使用https://www.npmjs.com/package/cors 模块
如何：
npm install cors
然后改变你的
router.get('/kfc', function(req, res, next)
到
router.get('/kfc', cors(), function(req, res, next)
也可以改用 CORS 模块，您可以使用此代码
app.use(function(req, res, next)
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
);
并将dataType: 'jsonp' 更改为dataType: 'json'
例子：
var express = require('express'),
cors = require('cors'),
app = express();
app.get('/kfc', cors(), function(req, res, next)
var response =
"id": "123",
"name": "name1",
"drink": "drink1"
res.end(JSON.stringify(response));
);
var port = process.env.PORT || 8080;
app.listen(port, function()
console.log('Node.js listening on port ' + port);
);
示例获取请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
/*fetch('http://localhost:8080/kfc')
.then((res) =>
res.json().then((data) =>
console.log(data);
);
)
.catch((err) =>
console.log(err);
);*/
$.ajax(
type: 'GET',
url: 'http://localhost:8080/kfc',
dataType: 'json',
success: function(data)
console.log(data)
);
</script>
</body>
</html>
【讨论】：
我在某处读到使用dataType: 'jsonp' 作为从另一个端口访问的解决方案。使用您的解决方案，我得到了ReferenceError: cors is not defined，所以我包含了var cors=require('cors');，但我仍然遇到这些错误。
@RahulChawla 你能提供所有的api代码吗？例如在 pastebin 上
这是我唯一的 api 代码。我在 localhost:3000/api/kfc 上提供 json 数据，localhost:8887/kfc.html @Mikhail 正在访问此 json 数据
我应该把app.use(function(req, res, next) ...);放在哪里？里面router.get('/kfc', function(req, res, next) ...);
@RahulChawla 你有var app = express(); 变量吗？以上是关于jQuery AJAX 访问 REST API JSON 数据的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 javascript/jquery/AJAX 调用 Django REST API？
使用 jQuery-Ajax REST API 调用的 iframe 显示不完整的页面
如何从 REST API 获取响应并从 jquery ajax 调用执行操作？
如何使用 ASP.NET MVC Rest API 调用和 jQuery Ajax 下载文件
Jquery(Ajax) 调用 SharePoint 2013 Search Rest API 并使用Josn反回结果并简单显示