Отправьте простое json из node.js в индекс. html

Question

Это должно быть простое решение, но когда я в Google, все, кажется, упускают это. Я хочу отправить простое json сообщение / файл в мой индекс. html

Node.js код

const express = require('express');
const app = express();
const path = require('path');
const router = express.Router();

router.get('/',function(req,res){
res.setHeader('Access-Control-Allow-Origin', '*');
res.sendFile(path.join(__dirname+'/index.html'));


}); 

app.get('/index.html', function(req, res, next) {
res.json({ message: 'Hello World' });
});

app.use('/', router);
app.listen(process.env.port || 3000);

console.log('Running at Port 3000');

Теперь внутри моего javascript кода у меня есть

$.ajax({
url: 'http://localhost:3000/',
complete: function(data) {
console.log(data);   <---------THIS IS WHERE I WANT THE JSON TO BE I 
WANT TO LOG 
IT

}
});

Почему мое Json сообщение не отображается ??? Как я могу получить эти данные и console.log это. Я ценю любую помощь, которую я могу получить в этом. Я использую Express.

Answer 1

Неправильное выполнение следующих двух фрагментов заставляет меня поверить, что OP не полностью понимает маршруты, маршрутизаторы и приложение Express.

router.get('/',function(req,res){
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.sendFile(path.join(__dirname+'/index.html'));
}); 

app.get('/index.html', function(req, res, next) {
    res.json({ message: 'Hello World' });
});

Маршрутизатор используется для определения доступных маршрутов, которые должны возвращать полезную информацию. Приложение Express затем использует этот маршрутизатор для надлежащего обслуживания запросов.

Чтобы определить маршрут, который будет возвращать 'hello world' вашему топору ios запросить переписать ваш маршрут на:

router.get('/',  (req, res) => {
    res.json({message: 'hello world'})
})

Answer 2

Я мог бы что-то здесь упустить, но попробуйте

app.get('/index.html', function(req, res, next) {
res.json({ message: 'Hello World' }).end();
});

и в запросе $. ajax убедитесь, что это запрос GET и URL-адрес завершен

$.ajax({
  url: 'http://localhost:3000/index.html',
  type: 'GET', 
  complete: function(data) {
    console.log(data);
  },
});

Answer 3

Вам просто нужно изменить код с:

res.send({"foo": "bar"});

на

res.json({"foo": "bar"});

Answer 4

Я проверил код сервера Miaplacidus и ajax вызов обоих работает нормально, но в случае, если я добавил тип данных типа json, как показано ниже.

$.ajax({
  url: 'http://localhost:3000/',
  data: {
    format: 'json'
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.log(textStatus, errorThrown);
  },
  success: function(data) {
    console.log(data);
  },
  type: 'GET'
});

Answer 5

Я использую Express CORS Middleware и не испытываю этой проблемы.

const express = require('express');
const cors = require('cors');
const app = express();
const path = require('path');
const router = express.Router();

router.get('/',function(req, res){
  res.json({foo: 'bar'});

}); 

app.use(cors())
app.use('/', router);
app.listen(process.env.port || 3000);

console.log('Running at Port 3000');

Вы также можете явно установить некоторые опции AJAX для jQuery. ajax:

$.ajax({
  url: 'http://localhost:3000/',
  type: 'GET', 
  complete: function(data) {
    console.log(data);
  },
});

Вы также можете попробовать опцию success для jQuery . ajax.