将动态创建的输入从 Angular 提交到 PHP 页面答案

【问题标题】：Submit dynamically created input from Angular to PHP Page将动态创建的输入从 Angular 提交到 PHP 页面
【发布时间】：2014-09-15 10:37:19
【问题描述】：

我正在尝试创建一个发票表格，它可以自行进行所有必要的计算，例如小计、税款总额。

点击提交按钮应该将所有值和动态创建的项目提交到 PHP 页面，该页面将根据需要将这些值（由用户编写或由 angularjs 计算）插入到适当的 SQL 表/列中。

基于这个project，我添加了这个javascript代码。

function PhpCtrl($scope, $http, $templateCache) {
var method = 'POST';
var url = 'added.php';
$scope.codeStatus = "";
$scope.add = function() {
var FormData = {};
$http({
  method: method,
  url: url,
  data: FormData,
  headers: {'Content-Type': 'application/x-www-form-urlencoded'},
  cache: $templateCache
}).
success(function(response) {
    $scope.codeStatus = response.data;
}).
error(function(response) {
    $scope.codeStatus = response || "Request failed";
});
return false;
};
}

谁能帮助我如何存储所有动态创建的项目及其值，以便将它们提交到 php 页面？

【问题讨论】：

只需使用var FormData = $('#formId').serialize()。我希望您所说的所有“动态创建的项目”都将作为 HTML 元素添加到 <form/> 标记中。如果您有任何不在<form/> 中的变量，请将它们添加到变量中，例如FormData += '&newValue=123&otherVal=kitty';。
您可以使用FormData 对象来创建您要提交到服务器的对象。但是在这里，您提交的是一个空表单。
你好 cackharot，很遗憾你的解决方案不起作用，当我点击提交按钮时，Chrome/IE 11 甚至看不到变量。至于“动态创建的项目”，请查看这个link 页面，第 78 行到第 85 行。我正在使用这个项目来创建我的发票表单，所以逻辑几乎相同。

标签： javascript php jquery angularjs

【解决方案1】：

您可以创建一个FormData 以使用这样的纯 javascript 动态提交：

var fd = new FormData();

fd.append("fieldName", valueToSubmit);
fd.append("arrayField[]",[1,2,3]); //you can even post array data

你将fd推送到服务器：

var uri = "added.php";
var xhr = new XMLHttpRequest();
xhr.open("POST",uri,true);
xhr.onreadystatechange=function(){
    if(xhr.readyState == 4 && xhr.status==200){
        //do something with returned data
    }
};
fd.append("img_file",blob_to_upload);// you can even upload a file
fd.append("user_id",data);
fd.append("category_id",category_id);
xhr.send(fd);

【讨论】：