发布请求未通过Angular.js发送。我究竟做错了什么?

时间:2015-10-29 15:08:01

标签: javascript angularjs node.js model-view-controller http-post

所以我试图从客户端点击获取一个名称,并将名称(我改为json,以便实际上能够发送信息)发送到服务器。现在,服务器将其发回,并且客户端将其发布到索引页面(我正在这样做,我可以看到服务器正在获取的数据)。当我看到数据显示为[object Object]时。所以有些事情出了问题,我希望有人可以帮助我。

的index.html

<body>

<div ng-app="myApp" ng-controller="customersCtrl"> 
<table style="width:100%">
 <tr ng-repeat="contact in databases.databases">
    <td>{{ contact.name }} <button type="button"ng-click="addContactlist(contact.name)">Click Me</button></td>
    <td>{{ contact.sizeOnDisk }} </td>
    <td>{{ contact.empty }} </td>
  </tr>
  </table> 

DB name clicked: <p ng-bind="DB_NAME"></p>
</div>

</body>

client.js

var app = angular.module('myApp', []);

app.controller('customersCtrl', function($scope, $http) {
    console.log("controller connected");

function refresh(){ 
// create contacklist route 
$http.get('/databases').success(function(response) {
    console.log("recived data requested");
    $scope.databases = response; 
  });
}

// Call refresh to init cantacklist 
refresh(); 


// add Doc to table 
$scope.addContactlist = function(contactItem) {
  alert("Working ");
    $http.post('/collection', JSON.stringify({'contactItem': contactItem})).success(function(response) {
      $scope.DB_NAME = response ; 
      });
    console.log("posted: "+contactItem);
  };




});// Controller 

server.js

var express = require('express');
var path = require('path'); //core module 
var databaseUrl = "localhost:27017/DB"; // default env
var bodyParser = require('body-parser');

var Db = require('mongodb').Db,
    MongoClient = require('mongodb').MongoClient,
    Server = require('mongodb').Server,
    ReplSetServers = require('mongodb').ReplSetServers,
    ObjectID = require('mongodb').ObjectID,
    Binary = require('mongodb').Binary,
    GridStore = require('mongodb').GridStore,
    Grid = require('mongodb').Grid,
    Code = require('mongodb').Code,
    assert = require('assert');

//configure app
var app = express(); 
var db = new Db('DB', new Server('localhost', 27017));


db.on('error', function (err) {
    console.log('database error', err)
}); 

db.on('connect', function () {
    console.log('database connected')
}); 

// store all html files in views 
app.use(express.static(__dirname + '/views'));
// parses recived json input 
app.use(bodyParser.json());
// store all js in Scripts folder
app.use(express.static(__dirname + '/scripts'));

// Technology not needed but good practice, especailly when serval people are working on it 
app.get('/', function (req, res) {
    res.sendFile('index.html');
}); 

// listen for contactlist get request, aka transfers the contacklist in mongo to client
app.get('/databases', function (req, res) {
    console.log("-- recived GET request --"); 
    db.open(function(err, db) {

      // Use the admin database for the operation
      var adminDb = db.admin();

      // List all the available databases
      adminDb.listDatabases(function(err, dbs) {
        assert.equal(null, err);
        assert.ok(dbs.databases.length > 0);
        console.log(dbs);
        res.json(dbs); 
        db.close();
      });
    });
}); 

// listen for contactlist get request
app.post('/collection', function (req, res) {
    console.log("-- recived collection post request --"); 
    console.log('req ' + req.body);
    res.json(req.body);

    db.open(function(err, db) {
         // Grab a collection without a callback no safe mode
         // once request is working will switch to re.body
        var col1 = db.collection('DB');
    });
}); 



// Implement a web server to listen to requests 
app.listen(4444, function(){
    console.log('ready on port 4444'); 
}); 

enter image description here

使用修复

enter image description here

1 个答案:

答案 0 :(得分:1)

响应是一个对象,试试这个:

DB name clicked: <p ng-bind="DB_NAME | json"></p>

json过滤器以JSON表示法转换对象:https://docs.angularjs.org/api/ng/filter/json