Angular.js 请求/响应 Node.js答案

【问题标题】：Angular.js request/response Node.jsAngular.js 请求/响应 Node.js
【发布时间】：2014-11-05 06:16:03
【问题描述】：

我正在尝试从我的 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 = 开始；

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

angular 中的console.log(data) 永远不会被调用..

【问题讨论】：

是否正在提交表单？你在事件中调用了 preventDefault 吗？
表单正在提交中。服务器返回 request.body 或我放入 JSON.stringify 中的任何其他内容，但 Angular.js 永远没有机会看到它，因为页面刷新并仅显示响应中的 json。就像从 node.js 部分发生某种重定向一样..
@anish 是的，是快递
@DusanJ。你能张贴表格代码吗？包含从 express 到 /login 的请求的相关路由处理代码可能会很好
@Gabs00 是的。我觉得我用 express 的方式真的很糟糕。

标签： javascript json node.js angularjs request

【解决方案1】：

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

来自 ng-submit 文档

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

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

因此，通过添加这些，您会在提交表单时导致页面刷新。

没有它们，Angular 会为您调用 $event.preventDefault()，从而阻止页面重新加载。

编辑：只是补充一下，您从服务器看到了正确的数据，因为您使用预设数据进行响应，当有人发布到 /login 时总是会提供这些数据。

所以你的表单目前完全绕过了 Angular，直接从服务器获取数据。

【讨论】：