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

川长思鸟来 2022-10-11 13:40 129阅读 0赞

我在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) \{