Angular $http.post 没有发送整个表单答案

【问题标题】：Angular $http.post is not sending the entire formAngular $http.post 没有发送整个表单
【发布时间】：2017-04-05 04:24:04
【问题描述】：

一个简单的 Angular 1.x $https.post 提交姓名（“J Doe”）和电话号码（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>

到执行插入 MySQL 的 Perl 脚本：

#!/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";

但唯一插入数据库的是：

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

姓名和电话不存在，但 $cgi->param('POSTDATA') 的打印会给出以下信息：

 {"json":"J Doe"}

好的，我找到了“J Doe”这个名字，以及一些奇怪的“json”键，但是电话号码呢？
我错过了什么？

【问题讨论】：

删除后会发生什么 || $name 和 $phone 的分配中的“未知”？
没有 || "unknown" 抛出执行错误，因为 $name 和 $phone 未设置。显然，$cgi->param('name') 等不存在。
听起来您的数据类型不匹配。正如下面的答案所示，您正在混合表单编码范例。您希望以什么格式发送数据？
Json 格式就可以了。我
那么你应该将content-type header设置为'application/json'并使用浏览器调试器来确保payload被编码为json。

标签： angularjs perl cgi

【解决方案1】：

通过将 $http.post 的 header 设置为 json 类型：

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

$cgi->param('POSTDATA') 变成了

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

从那里，Perl 的 decode_json 将字符串转换为哈希，从而解决了问题。

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

Stackoverflow 再次出现。

【讨论】：

AngularJS 默认的内容类型是application/json。我很惊讶它还没有发送那个。您的代码是否在某处覆盖了该默认值？有关详细信息，请参阅AngularJS $http API Reference - Setting HTTP Headers.
最初，POSTDATA 有一些看起来像我想要的数据的东西（请参阅原始帖子），但直到我遵循 Jason 的建议，将标头明确声明为“application/json”后，POSTDATA 才包含所有数据json格式。

【解决方案2】：

发生这种情况是因为您使用的是x-www-form-urlencoded，每当您使用该模式发布时，您需要在发布的 url 上添加数据作为查询字符串。

看起来像这样：

$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);

            });
        }
    });

但是您需要正确编码您发送的值，请参阅以下链接了解更多信息： How do I POST urlencoded form data with $http in AngularJS?

希望对您有所帮助。

【讨论】：