Angular.js请求/响应Node.js

Angular.js request/response Node.js

本文关键字：js Node 响应 请求 Angular      更新时间：2023-09-26

我正试图从我的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.24和Node.js v0.10.25

angular中的console.log（数据）从未被调用。。

嗨，尝试从表单中删除action和method。

从ng提交文件

启用将角度表达式绑定到取消提交事件。

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

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

如果没有它们，angular将为您调用$event.prventDefault（），从而阻止页面重新加载。

编辑：补充一下，你从服务器上看到了正确的数据，因为你使用的是预设数据，当有人发布到/登录时，这些数据总是会提供的。

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

相关文章：