Question

这是一个非常基本的问题，但我无法找到答案。如果它是重复的，请将我与答案联系起来，道歉。

我有两个网址http://127.0.0.1:8080/和http://127.0.0.1:8080/foo.htm

第一个有一个按钮和一个文本字段。按下按钮时，文本字段中的数据将作为POST请求发送到http://127.0.0.1:8080/foo.htm。我希望文本字段数据显示在foo.htm文件中。

单击该按钮时，应更改URL和视图。到目前为止，我有这个。

var bodyParser = require('body-parser')     
var express = require('express');
var app = express();
var serveStatic = require('serve-static')
var webpageDir = "/webpages"
var compression = require('compression')

//Sets up the basic express server
app.use(express.static('public'));
app.use(compression());
app.use( bodyParser.json()); 
//sets up the port on which server will listen
  var server = app.listen(8080, function () {
  var host = server.address().address
  var port = server.address().port
  console.log("Example app listening at http://%s:%s", host, port)
})

//Home page, basic url
app.get('/', function (req, res) {
   res.sendFile(__dirname + webpageDir+"/"+"main.htm");
})

// post request from main.htm gets sent here.
app.post("/foo.htm", function(request, response){
  //foo.htm should be displayed instead of main.htm with the input text
  response.sendFile(__dirname + webpageDir+"/"+"foo.htm");
})

以下是main.htm

<!DOCTYPE html>
<html>
   <head>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <title> Landing Page </title>
      <style>
          body {
              background-color: linen;
          }
      </style>
   </head>
   <body>
      <div ng-app="myApp" ng-controller="personCtrl">
     </br>
         <input ng-model="inputName" type='text' placeholder="Type your name here">
       </br></br>
         <p>Response as JSON is {{getResponse}} </p>
       <button ng-click="getRequest()">Send POST Request to /foo.htm </button>
     </hr>
      </div>

<script>

var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope, $location, $http, $window){

    $scope.getRequest = function(){
      var inputText = $scope.inputName;
      $http({
        method: 'POST',
        url: 'http://127.0.0.1:8080/foo.htm',
        data : {sampleTextSent :inputText }
      }).then(function successCallback(response) {
          $scope.getResponse=response;
          // The html code from foo.htm is being sent here
          // I want the URL to change and inputText to be sent
          // I can use $window to change the url but not data

        }, function errorCallback(error) {
          $scope.getResponse=error;

        })
    }
});
</script>

   </body>
</html>

最后foo.htm

<!DOCTYPE html>
<html>
    <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

   <head>
      <title>GET request demonstration</title>
   </head>

   <body>
     <div ng-app="myApp" ng-controller="myController">
      <h1>{{dataThatWasSentHere}}</h1>
    </div>
   </body>

   <script>
    var app = angular.module("myApp", []);
    app.controller("myController", function($scope){
      $scope.dataThatWasSentHere = // the input text was main.h
    })
   </script>
</html>

如果有人可以向我提供任何提示或引导我获得某些资源，我将非常感激。提前谢谢！

Answer 1

您有2个选项可供使用。

您可以使用html
如果要使用基于ajax的加载，请使用ngRoute和ngView。

我只是在第一个选项粘贴代码 main.htm ：

<!DOCTYPE html>
<html>
   <head>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <title> Landing Page </title>
      <style>
          body {
              background-color: linen;
          }
      </style>
   </head>
   <body>
        <div ng-app="myApp" ng-controller="personCtrl">
            </br>
            <form action="http://127.0.0.1:8080/foo.htm" method="post">
                <input ng-model="inputName" type='text' placeholder="Type your name here"></br></br>
                <p>Response as JSON is {{getResponse}} </p>
                <button type="submit" >Send POST Request to /foo.htm </button>
            </form>
            </hr>
        </div>

        <script>
        var app = angular.module('myApp', []);
        app.controller('personCtrl', function($scope, $location, $http, $window){
            //Ajax request not needed now
        });
        </script>
   </body>
</html>

Answer 2

这不是$ http请求的工作原理。如果您使用的是$ http，请求会转到foo.htm，但实际上您并没有重定向到foo。实际上，您可以使用普通的旧查询字符串执行所需操作，并完全省略帖子。

您可以使用查询字符串来实现您想要的内容：

document.location.href="foo.htm?name=" + $scope.inputName;

然后，在foo.htm的控制器中，您只需将文本写入页面：

app.controller("myController", function($scope){
    $scope.dataThatWasSentHere = document.location.href.substring(document.location.href.lastIndexOf("=")+1);

})

Answer 3

在网址

中将Cookie设置为响应

app.post("/foo.htm", function(request, response){
response.cookie('cookieName','cookieData');
  response.sendFile(__dirname + webpageDir+"/"+"foo.htm");
})

并使用$ cookieStore

获取角度值

如何将数据发布到其他网页？

3 个答案: