Question

我正在尝试从我的angular.js请求node.js服务器中的一些数据。问题是，在数据响应时，我看到一个空白的浏览器窗口，上面印有我的json对象。我希望angular.js能够识别响应并留在页面上。

HTML表单 - 使用loginController加载的模板

<section class="small-container">
    <div class="login-form">
        <form action="/login" method="post" ng-submit="processForm()">
            <input ng-model="formData.username" type="text" name="username">
            <input ng-model="formData.password" type="password" name="password">
            <button>login</button>
        </form>
    </div>
</section>

Angular.JS

var app = angular.module("blavor", ['ngRoute']);

app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider
        .when("/", {
            templateUrl: "/index",
            controller: "loginController"
        })
        .when("/register", {
            templateUrl: "/register",
            controller: "registerController"
        })
        .otherwise("/");

        $locationProvider.html5Mode(true);
}]);

app.controller('loginController', function($scope, $http) {
    $scope.formData = {};
    $scope.processForm = function() {
        $http({
            method: 'POST',
            url: '/login',
            data: $.param($scope.formData),
            processData: false, 
            responseType: "json",
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).success(function(data) {
                console.log(data);
                if (!data.success) {
                    alert("Noo!");
                } else {
                    alert("YEEEY!");
                }
            });
    };
});

Node.js服务器 - index.js

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var express = require('express');

var bodyParser = require('body-parser');
app.use( bodyParser.json() );
app.use( bodyParser.urlencoded({ extended: false }) );
var routes = require('./routes')(app);
http.listen(3000, function() {
    console.log('listening on *:3000');
});

module.exports.start = start;

Node.js服务器 - 路由

module.exports = function(app) {
app.post('/login', function(request, response) {
console.log(request.body);
    response.setHeader('Content-Type', 'application/json');
    response.end(JSON.stringify({value:"somevalue"}));
});
}

我正在使用AngularJS v1.2.24和Node.js v0.10.25

console中的console.log（data）永远不会被调用..

Answer 1

您好，请尝试从表单中删除action和method。

来自ng-submit docs

启用将角度表达式绑定到onsubmit事件。

此外，它会阻止默认操作（表单意味着将请求发送到服务器并重新加载当前页面），但前提是表单不包含操作，数据操作或x-action属性。

因此，通过添加这些内容，您将在提交表单时刷新页面。

如果没有它们，angular会为你调用$ event.preventDefault（），这会阻止重新加载页面。

编辑：只是要添加，您正在从服务器看到正确的数据，因为您正在使用预设数据进行响应，当有人发布到/ login时，将始终提供这些数据。

因此，您的表单目前完全绕过角度，并直接从服务器获取数据。

Angular.js请求/响应Node.js

1 个答案: