Angular $http.post is not sending the entire form

Question

A simple angular 1.x $https.post which submits a name ("J Doe") and a phone number (1234567):

<!DOCTYPE html>
<html>
<head>
<script  src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">  </script>
    <script>
    var app = angular.module('myApp',[]);
    app.controller('myCtrl',function($scope,$http){
        $scope.insertData=function(){
            $http.post("cgi-bin/in.cgi",{
              'bname':$scope.bname,
              'bphone':$scope.bphone
               }).then(function(response){
                    console.log("Data Inserted Successfully");
                },function(error){
                    alert("Sorry! Data Couldn't be inserted!");
                    console.error(error);

                });
            }
        });
    </script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <form>
            Name:- <input type="text" ng-model="bname" />
            Phone:-<input type="text" ng-model="bphone" />
            <input type="button" value="Submit" ng-click="insertData()" />
        </form>
    </div>

</body>
</html>

To a Perl script which does an insert into MySQL:

#!/usr/bin/perl -w

use strict;
use warnings;
use CGI qw(:standard);
use DBI;
use POSIX qw(strftime);
use JSON;

my $sql;

my $dbh = DBI->connect('****', '****', '****') || die "Connecting from Perl to MySQL database failed: $DBI::errstr";

my $cgi   = CGI->new;
my $name  = $cgi->param('bname') || "unknown";
my $phone = $cgi->param('bphone') || "unknown";

print "Content-type:text/html\r\n\r\n";

$sql =  "insert into TestDB values ('$name', '$phone')";
$dbh->do("$sql") || die ("Connecting from Perl to MySQL database failed: $DBI::errstr");

$dbh->disconnect;

print "Record insert successfully";

But the only thing being inserted into the DB is:

+---------+---------+
| Name    | Phone   |
+---------+---------+
| unknown | unknown |
+---------+---------+
1 row in set (0.00 sec)

The name and phone are nowhere, but a print of $cgi->param('POSTDATA') give the following:

 {"json":"J Doe"}

OK, I found the name, "J Doe", along with some weird "json" key, but where's the phone number?
What am I missing?

What happens when you remove || "unknown" from the assignments for $name and $phone? — Jason K., Apr 04 '17 at 19:03
Without the || "unknown" an execution error is thrown because $name and $phone are not set. Apparently, $cgi->param('name'), etc. don't exist. — user2569618, Apr 04 '17 at 19:06
It sounds like you have a mismatch of your data types. As the answer below indicates, you are mixing form encoding paradigms. What format would you like to send the data in? — Jason K., Apr 04 '17 at 19:13
Then you should set the content-type header to 'application/json' and use the browser debugger to ensure that the payload is encoded as json. — Jason K., Apr 04 '17 at 19:26
header : { 'Content-Type': 'application/json' } did the trick. — user2569618, Apr 04 '17 at 20:16

score 2 · Accepted Answer · answered Apr 04 '17 at 20:24

2

By setting $http.post's header to type json:

header : { 'Content-Type': 'application/json' }

$cgi->param('POSTDATA') became

{ "bname" : "J Doe", "bphone" : "1234567" }

From there, Perl's decode_json converted the string to a hash which finished off the problem.

my $decoded = decode_json($cgi->param('POSTDATA'));
$sql =  "insert into TestDB values ('$decoded->{bname}', '$decoded->{bphone}')";

Stackoverflow comes through again.

answered Apr 04 '17 at 20:24

user2569618

517
3
16
42

The AngularJS default for content type is `application/json`. I am surprised that it was not already sending that. Did your code override that default somewhere? For more information, see [AngularJS $http API Reference - Setting HTTP Headers.](https://docs.angularjs.org/api/ng/service/$http#setting-http-headers) – georgeawg Apr 05 '17 at 00:23
Originally, POSTDATA had something that looked like the data I wanted (see original posting), but not until I followed Jason's suggestion of explicitly declaring the header as "application/json" did POSTDATA contain all the data in json format. – user2569618 Apr 05 '17 at 16:27

score 1 · Answer 2 · edited May 23 '17 at 12:02

It happens because you are using x-www-form-urlencoded, whenever you post using that mode you need to add the data on the posted url as a querystring.

It would look like this:

$scope.insertData=function(){
        $http.post("cgi-bin/in.cgi?bname=" + $scope.bname + "&bphone=" + $scope.bphone, {
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
           }).then(function(response){
                console.log("Data Inserted Successfully");
            },function(error){
                alert("Sorry! Data Couldn't be inserted!");
                console.error(error);

            });
        }
    });

But you would need to properly encode the values you are sending, please refer to the following link for more information: How do I POST urlencoded form data with $http in AngularJS?

Hope that helps.

Angular $http.post is not sending the entire form

2 Answers2