AngularJS HTTP POST不起作用

我刚刚开始使用NodeJs + mySQL学习AngularJS，并且我不太熟悉Express如何处理来自Angular控制器的POST请求。AngularJS HTTP POST不起作用

最新通报 我我能够在我的CMD得到POST /登录200，但现在网页不重定向到success.html出于某种原因。我也得到“成功的行动”，这意味着回调是成功的？

这是我的客户端（角）的代码，的index.html

<!DOCTYPE html> 
<html> 
<head> 

<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"> 
</script> 

<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<link rel="stylesheet" type="text/css" href="../public/css/style.css"> 
</head> 
<body> 
<div ng-app="myApp" ng-controller="loginController"> 
<div class="container"> 
<br> 
<br> 
<br> 
<br> 
<h1 class="welcome text-center" style="text-align:center;">Welcome</h1> 

    <div class="card card-container"> 
    <!-- 
    <h2 class='login_title text-center'>Login</h2> 
    --> 
    <hr> 

     <form class="form-signin" ng-submit="sub()"> 

      <p class="input_title">Username:</p> 
      <input type="text" id="inputEmail" class="login_box" ng-model="username" required autofocus> 
      <p class="input_title">Password</p> 
      <input type="password" id="inputPassword" class="login_box" ng-model="password" required> 
     <br> 
     <br> 
      <button class="btn btn-lg btn-primary" type="submit">Login</button> 
     </form><!-- /form --> 
    </div><!-- /card-container --> 
</div><!-- /container --> 

</div> 

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

app.controller("loginController", function($scope,$http) { 

$scope.sub = function() { 

    var data = { 
     username: $scope.username, 
     password: $scope.password, 
     body: $scope.body 
    }; 

    $http.post("/login", data).then(function(success){ 
     console.log('action on success'); 
    }, function(error) { 
     console.log('action on error'); 
    }); 


} 
} 
</script> 

</body> 
</head> 
</html>

而且我的服务器端代码，server.js

var express = require('express'); 
var bodyParser = require('body-parser'); 
var morgan = require('morgan'); 
var config = require('./config'); 
var sequelize = require('sequelize'); 
var passport = require('passport'); 
var jwt = require('jsonwebtoken'); 

var app = express(); 
app.use(bodyParser.urlencoded({extended:true})); 
app.use(bodyParser.json()); 
app.use(morgan('dev')); 
app.use(passport.initialize()); 

app.use(function(req, res, next) { 
res.setHeader('Access-Control-Allow-Origin', '*'); 
res.setHeader('Access-Control-Allow-Methods', 'GET, POST'); 
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content- 
type, Authorization'); 
next(); 
}); 


app.use(express.static(__dirname + '/app')); 

app.get('/',function(req,res){ 

res.sendFile(__dirname + '/app/views/index.html'); 


}); 

app.post('/login', function(req, res, next){ 
console.log("post here!"); 
return res.redirect(__dirname +'/app/views/success.html'); 
}); 

app.listen(3000,function(err){ 

if(err){ 

console.log(err); 
} 
else{ 
console.log("Listening on port 3000"); 
} 
});

应该不是POST代码为server.js运行并重定向到success.html一旦用户点击提交？在此先感谢。

来源

2017-09-02 Jackelll

你得到了什么错误？它是否在浏览器中打印任何控制台？ –

该应用程序不起作用。每次点击提交时，它都会刷新自己 – Jackelll

在表单上使用'novalidate'可以防止发生刷新。至于为什么在你的JS中没有显示控制台日志，这是因为在你的服务器的post请求中你没有返回响应，所以没有触发fail/success回调。 –

你真的不需要在AngularJS应用中使用jQuery。

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

app.controller("loginController", function($scope,$http) { 

    $scope.sub = function() { 

     var postObj = { 
      username: $scope.username, 
      password: $scope.password, 
      body: $scope.body 
     } 

     $http.post("/login", postObj).then(function(success){ 
      console.log('action on success'); 
     }, function(error) { 
      console.log('action on error'); 
     }); 

    } 

}); 

</script>

对于默认请求将发送与Content-Type: application/json标题。

来源

2017-09-02 09:58:09

感谢您的意见，我已作出相应的更改，但仍面临相同的结果。控制台甚至不显示日志，例如对成功执行操作/错误 – Jackelll

好的，这些代码应该在客户端工作。请在Chrome中查看请求。你有没有看到任何错误？也许有404？ –

检查文档时，$ http.post上有“Uncaught SyntaxError：Unexpected identifier”错误（....... Line， – Jackelll

AngularJS HTTP POST不起作用

回答

相关问题