How do I post data to another web page?

Question

This is a very basic question but I am unable to find the answer. If its a duplicate, kindly link me to the answer, apologies.

I have two urls http://127.0.0.1:8080/ and http://127.0.0.1:8080/foo.htm

The first one has a button and a text field. When the button is pressed, the data in the text field is sent as a POST request to http://127.0.0.1:8080/foo.htm. I want the text field data to be shown in foo.htm file.

When the button is clicked, the url as well as the view should be changed. I have this so far.

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");
})

Following is 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>

And at last 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>

If someone could provide me any hints or lead me to some resources, I would really appreciate it. Thanks in advance!

Missing out on main reason angular is so popular ... it is most commonly used as single page client side application to avoid page reloads from server. Look into how to use angular routers and `$http` to send/receive data. Tutorial on angular docs site shows how both work or install any of the multitude of MEAN seed apps and study how they are set up — charlietfl, Jun 05 '16 at 13:12

score 0 · Answer 1 · answered Jun 05 '16 at 13:18

You have 2 options to be used.

You can use html
Use ngRoute and ngView if you want to use ajax based loading.

I am simply pasting code for first option here 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>

score 0 · Answer 2 · answered Jun 05 '16 at 13:22

0

That's not really how $http requests work. If you're using $http, the request goes to foo.htm, but you don't actually redirect to foo. You can actually do what you want with a plain old querystring, and leave out the post entirely.

You can just use a querystring to achieve what you want like this:

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

Then, in the controller for foo.htm, you can just write the text to the page:

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

})

answered Jun 05 '16 at 13:22

nixkuroi

2,259
1
19
25

I have done this, but I want to use purely angular js and not any html, plus I plan to add a picture to the data as well as my next step, which I think angular might handle better. Not sure though. – Varun Agarwal Jun 05 '16 at 13:33
Ah, in that case, I recommend passing your scope between routes, as seen here: http://stackoverflow.com/questions/13882077/angularjs-passing-scope-between-routes – nixkuroi Jun 06 '16 at 15:21

score 0 · Answer 3 · answered Jun 05 '16 at 13:22

set the cookie as response in the url

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

and get the value in your in angular using $cookieStore

How do I post data to another web page?

3 Answers3