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不起作用

回答

相關問題