html ajax rest,jQuery AJAX访问REST API JSON数据

我在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

Order Placed

//kfcLoad.js

$(function(){

var $ulOrder=$('#ulOrder');

function addOrder(order)

{

$ulOrder.append('

ID: '+ order.id+'Name: '+ order.name+'Drink: '+order.drink+'

');

}

$.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:3000apikfc. No Access-Control-Allow-Origin header is present on the requested resource. Origin null is therefore not allowed access.

@eblin它仍然给出那些错误。

在使用jsonp之前先研究一下它是什么... wtf

JSON和JSONP有什么区别？

在您的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模块代替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);

});

和示例获取请求

/*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)

}

});

我读过某处使用dataType: jsonp作为从另一个端口访问的解决方案。 在您的解决方案中，我得到了ReferenceError: cors is not defined，所以我包括了var cors=require(cors);，但仍然遇到了这些错误。

@RahulChawla您可以提供所有api代码吗？ 例如在pastebin上

那就是我唯一的api代码。 我在localhost：3000 / api / kfc上提供json数据，该json数据正由localhost：8887 / kfc.html @Mikhail访问

@RahulChawla我使用用法示例编辑答案

app.use(function(req, res, next) {...});应该放在哪里？ 内部router.get(kfc, function(req, res, next) {...});

@RahulChawla您有一个var app = express();变量吗？

看起来像这样var express = require(express); var router = express.Router(); cors=require(cors);

@RahulChawla尝试将var app = express();添加到您的代码中并使用cors

@RahulChawla并将dataType: jsonp更改为dataType: json

@RahulChawla JSON和JSONP有什么区别？