節點，JS和jQuery不工作在localhost

我有這樣的API與Node.js的製作，這是簡單的，它只是一個箱子後：節點，JS和jQuery不工作在localhost

var express = require('express'); 
var mongoose = require('mongoose'); 
var bodyParser = require('body-parser'); 
var app = express(); 
var Posts = require('./models/posts'); 

mongoose.connect('mongodb://localhost/api', function(err) { 
    if(err) { 
    console.log("Error with mongodb: " + err); 
    } 
}); 
app.use(bodyParser()); 

var port = process.env.PORT || 3000; 

var router = express.Router(); 

router.get('/', function(req, res){ 
    res.json({message: 'It\'s working'}); 
}); 

router.route('/posts') 
    .get(function(req, res) { 
    Posts.find(function(err, data) { 
     if(err) { 
     res.send(err); 
     } 
     res.json(data); 
    }); 
    }) 
    .post(function(req, res) { 
    var posts = new Posts(); 
    posts.title = req.body.title; 
    posts.description = req.body.description; 
    posts.content = req.body.content; 
    posts.save(function(err) { 
     if(err) { 
     res.send(err); 
     } 
     res.json({message: "Post saved!"}); 
    }); 
    }); 

router.route('/posts/:id') 
    .get(function(req, res){ 
    Posts.findById(req.param.id, function(err, data) { 
     if(err) { 
     res.send(err); 
     } 
     res.json(data); 
    }); 
    }) 
    .put(function(req, res) { 
    Posts.findById(req.params.id, function(err, data) { 
    if(err) { 
    res.send(err); 
    } 
    data.nome = req.body.nome; 
    data.description = req.body.description; 
    data.content = req.body.content; 
    data.date = Date.now; 
    data.save(function(err) { 
     if(err) { 
      res.send(err); 
     } 
     res.json({message: 'Post updated!'}); 
     }); 
    }); 
    }) 
    .delete(function(req, res) { 
    Posts.remove({_id: req.params.id}, function(err, data) { 
     if(err) { 
     res.send(err); 
     } 
     res.json({message: 'Post deleted!'}); 
    }); 
    }); 

app.use('/api', router); 
app.listen(port, function() { 
    console.log("Server running on: " + port); 
});

而且我對jQuery的

$.ajax({ 
    url: 'http://localhost:3000/api/posts/', 
    type: "GET", 
    dataType: 'jsonp', 
    success: function(returnit) { 
    $.each(returnit.posts, function() { 
     var post = this; 
     $('<p>').text(post.title).appendTo('.blog--area'); 
    }); 
    } 
});

驗證碼

有人可以向我解釋發生了什麼，爲什麼發生？我是JavaScript新手，它是框架，當我在控制檯上查看時，它什麼都沒說。

如果可以的話，請給出一些提示。謝謝...

編輯

我忘了提及的錯誤，它沒有顯示的職位。

來源

2016-04-28 joaomarcuslf

你回來了什麼錯誤？ – FiringSquadWitness

它不顯示帖子 – joaomarcuslf

對於調試，嘗試添加一些'console.logs'到你的代碼。例如。在函數posts.find（function（err，data）{'添加類似'console.log（「data from db」，data）''）到你的回調函數之後。在成功函數中在客戶端執行同樣的操作：'console.log（「received data」，returnIt）'等等。至少用這種方法你可以找出問題的原因。 – Anastasia

您正在使用JSONP進行跨域調用。這需要您的Express部分（服務器）進行一些更改。更改res.json(data)到res.jsonp(data)

例子：

router.route('/posts') 
    .get(function(req, res) { 
    Posts.find(function(err, data) { 
     if(err) { 
     res.send(err); 
     } 
     res.jsonp(data); //changed 
    }); 
    })

說明： 當你對API服務器發出Ajax調用的數據類型是jsonp客戶端尋找一個包裹在一個回調函數響應。

由於JSONP將JSON響應封裝到JavaScript函數中，並將其作爲腳本發送回客戶端。腳本不受同源策略的約束，並且在加載到客戶端時，該函數的行爲就像它包含的JSON對象一樣。

在你的情況你的客戶正在尋找這樣的事情：

callback_Name({"title": "Foo", "description": "HelloWorld", "content": "OK"})

但越來越：

{"title": "Foo", "description": "HelloWorld", "content": "OK"}

因此，對於JSONP響應中的一個必須使用資源.jsonp在express中。

來源

2016-04-28 01:44:13 Nivesh

節點，JS和jQuery不工作在localhost

回答

相關問題