“；无法发布/”；当我尝试单击HTML中的提交按钮时

我见过类似的问题，但我无法理解错误和解决方法

我有一个基本的平均堆栈应用程序。我有一个“提交”按钮，如果我单击该按钮，它会在浏览器中抛出一个错误，并显示：

Cannot POST /

尽管如此，post请求已发送到服务器，并在我的数据库中得到更新。我只想浏览器返回到上一页后，我点击提交和张贴请求完成

浏览器控制台还显示一个错误，说明：

POST http://localhost:3000/ 404 (Not Found)

以下是我的文件供参考ctrl1.js：

    var app = angular.module('myApp', []);
app.controller('myCtrl',['$scope', '$http', function($scope, $http) {
    console.log("Hello from controller");

    $scope.application = {};

    var refresh = function(){
        $http.get('/applicationList').then(function(response){
            console.log("I got the applications I requested");
            $scope.applicationList = response.data;
            // $scope.contact = null;
        });

    };
    refresh();
    $scope.saveApplication = function(){
        console.log($scope.application);

        $scope.application.state = "saved";
        $http.post('/applicationList', $scope.application).then(function(response){
            console.log(response);
            //refresh();
        });
    };


    $scope.submitApplication = function(){
        console.log("reached here");
        console.log($scope.application);
        console.log("reached here");
        $scope.application.state = "submit";
        $http.post('/applicationList', $scope.application).then(function(response){
            console.log(response);
            refresh();
        });
    };

    $scope.remove = function(id){
        console.log(id);
        $http.delete('/applicationlist/'+id).then(function(response){
            refresh();
        });

    };

    $scope.edit = function(id){
        console.log(id);
        $http.get('/applicationlist/'+id).then(function(response){
            $scope.application = response.data;
            //refresh();
        });
    };

    $scope.update = function(){
        console.log($scope.application._id);
        $http.put('/applicationlist/' + $scope.application._id, $scope.application).then(function(response){
            //$scope.contact = response.data;
            refresh();
        });
    };

    // $scope.clear = function(){
    //     $scope.application = "";
    // };

    //Universities
    $scope.application.selectname1={};
    $scope.application.selectname2={};
    $scope.application.selectname3={};

    $scope.filter1 = function(item){
      return (!($scope.application.selectname1&&$scope.application.selectname1.id)||item.id !=$scope.application.selectname1.id||item.id==100);
    };

    $scope.filter2 = function(item){
      return (!($scope.application.selectname2&&$scope.application.selectname2.id)||item.id!=$scope.application.selectname2.id||item.id==100);
    };
    $scope.filter3 = function(item){
      return (!($scope.application.selectname3&&$scope.application.selectname3.id)||item.id !=$scope.application.selectname3.id||item.id==100);
    };
    $scope.universities = [
        {
            id:1,
            name: 'IITs'
        },
        {
            id:2,
            name: 'IIITs'
        },
        {
            id:3,
            name: 'BITS'
        },
        {
            id:100,
            name: 'None'
        }
    ];


    //Degrees
    $scope.application.selectdegree1={};
    $scope.application.selectdegree2={};
    $scope.application.selectdegree3={};

    $scope.filterDegree1 = function(item){
      return (!($scope.application.selectdegree1&&$scope.application.selectdegree1.id)||item.id !=$scope.application.selectdegree1.id||item.id==100);
    };

    $scope.filterDegree2 = function(item){
      return (!($scope.application.selectdegree2&&$scope.application.selectdegree2.id)||item.id!=$scope.application.selectdegree2.id||item.id==100);
    };
    $scope.filterDegree3 = function(item){
      return (!($scope.application.selectdegree3&&$scope.application.selectdegree3.id)||item.id !=$scope.application.selectdegree3.id||item.id==100);
    };
    $scope.degrees = [
        {
            id:1,
            name: 'PhD'
        },
        {
            id:2,
            name: 'Masters'
        },
        {
            id:3,
            name: 'BTech'
        },
        {
            id:100,
            name: 'None'
        }
    ];


    $scope.check = function(evt,cityName)
    {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(cityName).style.display = "block";
        return true;
    }



}]);

我的html如下所示：

<!DOCTYPE html>
<html ng-app="myApp">
<head>

    <!-- Latest compiled and minified CSS - loading at the top, since we want stylesheets to load up as soon as the page comes up -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <link href="css/index.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="controllers/ctrl1.js"></script>



    <title>Intern Applications App</title>
</head>
<body ng-controller="myCtrl">

    <div class="container">
        <nav id="tab-navigation">
            <a href ng-click="check(event, 'page1')" id="defaultOpen">Applications Form</a>
            <a href ng-click="check(event, 'page2')" >Application List</a>

        </nav>




    <div class="tabcontent" id="page1">

    <form class="well form-horizontal" action=" " method="post"  id="contact_form">
        <!-- <fieldset> -->

        <!-- Form Name -->
        <legend>Intern Application Form</legend>

        <div class="form-group">
          <label class="col-md-4 control-label">Project Title</label>
            <div class="col-md-4 inputGroupContainer">
            <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
                    <textarea class="form-control" name="comment" placeholder="Project Title" ng-model="application.title" ></textarea>
          </div>
          </div>
        </div>

        <div class="form-group">
          <label class="col-md-4 control-label">Project Description</label>
            <div class="col-md-4 inputGroupContainer">
            <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
                    <textarea class="form-control" name="comment" ng-model="application.description" placeholder="Project Description" ></textarea>
          </div>
          </div>
        </div>

        <!-- Text input-->

        <div class="form-group">
          <label class="col-md-4 control-label">Approach</label>
            <div class="col-md-4 inputGroupContainer">
            <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
                    <textarea class="form-control" name="comment" ng-model="application.approach" placeholder="Approach" ></textarea>
          </div>
          </div>
        </div>

        <div class="form-group">
           <label class="col-md-4 control-label">Is the dataset available?</label>
           <div class="col-md-4">
               <div class="radio">
                   <label>
                       <input type="radio" id="yes" name="dataset" value="yes" ng-model="application.isData"/> Yes
                   </label>
               </div>
               <div class="radio">
                   <label>
                       <input type="radio" id="no" name="dataset" value="no" ng-model="application.isData"/> No
                   </label>
               </div>

           </div>
       </div>

        <!-- Text input-->

        <div class="form-group" ng-show="application.isData == 'no'">
          <label class="col-md-4 control-label">Approach for Data Collection</label>
          <div class="col-md-4 inputGroupContainer">
          <div class="input-group">
          <input name="first_name" ng-model="application.dataDescription" placeholder="Approach" class="form-control"  type="text">
            </div>
          </div>
        </div>

        <div class="form-group" ng-show="application.isData == 'yes'">
          <label class="col-md-4 control-label">Data Available at</label>
          <div class="col-md-4 inputGroupContainer">
          <div class="input-group">
          <input  name="first_name" placeholder="Approach" class="form-control"  type="text">
            </div>
          </div>
        </div>

        <!-- Text input-->

        <div class="form-group">
          <label class="col-md-4 control-label">Impact</label>
            <div class="col-md-4 inputGroupContainer">
            <div class="checkbox">
                <label>
                    <input type="checkbox" id="yes" value="Technical" ng-model="application.technical"/> Technical
                </label>
                <label>
                    <input type="checkbox" id="yes" value="Business" ng-model="application.business"/> Business
                </label>
            </div>

            </div>
          </div>

        <!-- Text input-->

        <div class="form-group">
          <label class="col-md-4 control-label">Number of Interns</label>
            <div class="col-md-4 inputGroupContainer">
            <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
                    <input name="first_name" placeholder="Number" ng-model="application.numberOfInterns" class="form-control"  type="text" >
          </div>
          </div>
        </div>

        <div class="form-group">
          <label class="col-md-4 control-label">Skill Set </label>
            <div class="col-md-4 inputGroupContainer">
            <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
                    <textarea class="form-control" name="comment" ng-model="application.skillSet" placeholder="Skill Set " ></textarea>
          </div>
          </div>
        </div>

        <div class="form-group">
            <label class="col-md-4 control-label">University Preference</label>
            <div class="col-md-4 inputGroupContainer">
            <!-- <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
                    <textarea class="form-control" name="comment" ng-model="application.skillSet" placeholder="Skill Set " ></textarea>
          </div> -->
                <div class="input-group">
                    <select ng-model="application.selectname1"
                        ng-options="item as item.name for item in universities|filter:filter2|filter:filter3" ><option value="">- select -</option>
                    </select>


                    <select ng-model="application.selectname2"
                        ng-options="item as item.name for item in universities|filter:filter1|filter:filter3" ><option value="">- select -</option>
                    </select>

                    <select ng-model="application.selectname3" ng-options="item as item.name for item in universities|filter:filter1|filter:filter2" ><option value="">- select -</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="form-group">
          <label class="col-md-4 control-label">Other Comments</label>
            <div class="col-md-4 inputGroupContainer">
            <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
                    <textarea class="form-control" name="comment" ng-model="application.comments" placeholder="Comments"></textarea>
          </div>
          </div>
        </div>


        <!-- Button -->
        <div class="form-group">
          <label class="col-md-4 control-label"></label>
          <div class="col-md-2">
            <button type="submit" class="btn btn-primary" ng-click="submitApplication()"> Submit <span class="glyphicon glyphicon-send"></span></button>
          </div>
          <div>
            <button type="submit" class="btn btn-warning" ng-click="saveApplication()"> Save <span class="glyphicon glyphicon-floppy-disk"></span></button>
          </div>

        </div>



        <!-- </fieldset> -->
        </form>
        </div>

        <div class="tabcontent" id="page2" style="display: none;">

            <table class="table">
                <thead>
                    <tr>
                        <th>Project Title</th>
                        <th>Project Description</th>
                        <th>State</th>
                        <th></th>
                    </tr>
                    <tbody>
                        <tr ng-repeat="apllication in applicationList">
                            <td>{{application.title}}</td>
                            <td>{{application.description}}</td>
                            <td>{{application.state}}</td>
                            <td><button class="btn btn-danger" ng-click="remove(application._id)" ng-show="application.state='saved'">Delete</button></td>
                            <td><button class="btn btn-warning" ng-click="edit(application._id)" ng-show="application.state='saved'">Edit</button></td>
                        </tr>
                    </tbody>
                </thead>
        </div>


        </div>



</body>

</html>

实习生应用程序
实习申请表
项目名称
项目说明
方法
数据集可用吗？
对
不
数据收集方法
数据可在
影响
技术的
生意
实习生人数
技能集
大学偏好
-挑选-
-挑选-
-挑选-
其他评论
提交
拯救
项目名称
项目说明
陈述
{{application.title}
{{application.description}}
{{application.state}
删除
编辑

您的数据库会得到更新，因为您在提交按钮上附加了一个

ng click

指令，该指令正确地点击了您的

/applicationList

路径，并发出

帖子：这很好

同时，您的按钮位于表单元素内，类型为
submit
，这意味着单击它将触发表单操作。因为您将表单action留空-
action=”“
，所以您也在点击不存在的
/
路径。这就是为什么你会犯错误

一个简单的修复方法是将按钮类型更改为
按钮
，这样它们就不会触发表单操作，并从表单中删除
操作
属性。
您的数据库会得到更新，因为您已将
ng click
指令附加到提交按钮上，它正确地击中了你的
/applicationList
路线，并发出了
帖子：这很好

同时，您的按钮位于表单元素内，类型为
submit
，这意味着单击它将触发表单操作。因为您将表单action留空-
action=”“
，所以您也在点击不存在的
/
路径。这就是为什么你会犯错误

一个简单的解决方法是将按钮类型更改为
按钮
，这样它们就不会触发表单操作，并从表单中删除
操作
属性。
您正试图获取
'/'
，请将此代码写入

server.js

app.get('/', function(req, res) {
  res.end('Welcome to api');
  return;
})

您正试图为此获取
'/'
，请在中编写此代码

server.js

app.get('/', function(req, res) {
  res.end('Welcome to api');
  return;
})

尝试为你的表单设置正确的“动作”值（你放了一个空格）@Benfarhat-嘿，谢谢你的评论！我是第一次使用表格。。你能告诉我应该给出的值是多少吗？应该是ctrl1.js吗？正如我读到的，它是数据需要发送的地方？尝试为表单设置正确的“操作”值（你放了一个空格）@Benfarhat-嘿，谢谢你的评论！我是第一次使用表格。。你能告诉我应该给出的值是多少吗？它应该是ctrl1.js吗？正如我读到的，它是需要发送数据的地方吗？