Angularjs-表单发布数据未发布
Angularjs - Form Post Data Not Posted?
我必须承认我有点困惑。。。我以前从未这样做过,我显然错过了
当我通过http.post将数据传递到我的php文件时,我似乎无法收集数据。。。
有人能告诉我为什么这不起作用吗?
FormData显示在控制台日志中,并且文件肯定正在写入中。。但是,看起来没有传递任何数据。。
$scope.submitForm = function() {
formData = $scope.form;
$http.post('form2.php', JSON.stringify(formData)).success(function(){
console.log(formData);
//window.location.href = "form2.php?data=" + JSON.stringify(formData);
});
};
这在我的php文件中。。正在尝试将提交的表单中的数据写入文件。。。(只是测试)。。
<?php
$file = 'form2.txt';
$data = json_decode($_REQUEST['data'],true);
//print( '<pre>' );
//print_r ($data);
//print( '</pre>' );
$data_insert = "Name: " . $data['firstname'] .
", Email: " . $data['emailaddress'] .
", Description: " . $data['textareacontent'] .
", Gender: " . $data['gender'] .
", Is Member: " . $data['member'];
//print $data_insert;
file_put_contents($file, $data_insert, FILE_APPEND | LOCK_EX);
?>
在进行了大量研究后,我发现这在某种程度上是php规范的问题。。我在这两个帖子上找到了答案。。
此处:角度HTTP发布到PHP和未定义的
在这里:http://sebgoo.blogspot.ca/2013/05/angularjs-post-data-to-php.html
我最后的PHP代码如下。。
$file = 'form2.txt';
$postdata = file_get_contents("php://input");
$data = json_decode($postdata, true);
$data_insert = "Name: " . $data['firstname'] .
", Email: " . $data['emailaddress'] .
", Description: " . $data['textareacontent'] .
", Gender: " . $data['gender'] .
", Is a member: " . $data['member'];
//print $data_insert;
file_put_contents($file, $data_insert, FILE_APPEND | LOCK_EX);
我也要感谢Mike Brant(https://stackoverflow.com/users/1529853/mike-brant)其从引用的堆栈帖子中得到的解决方案非常有用。。我也支持他的回应。
我的angular应用程序代码看起来像这样。。。多亏了阿图尔·格泽西亚克,它比原来有了很大的改进(https://stackoverflow.com/users/2956115/artur-grzesiak)
var app = angular.module('myApp', []);
app.controller('FormCtrl', function ($scope, $http) {
var formData = {
firstname: "default",
emailaddress: "default",
textareacontent: "default",
gender: "default",
member: false
};
$scope.submitForm = function() {
$http({
url: "form2.php",
data: $scope.form,
method: 'POST',
headers : {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}
}).success(function(data){
console.log("OK", data)
}).error(function(err){"ERR", console.log(err)})
};
});
最后,用于提交此表单的HTML表单看起来像这样。。。
<div ng-app="myApp">
<form ng-controller="FormCtrl" ng-submit="submitForm()">
First name: <br/><input type="text" ng-model="form.firstname"> <br/><br/>
Email Address: <br/><input type="text" ng-model="form.emailaddress"> <br/><br/>
Description:<br/> <textarea rows="3" cols="25" ng-model="form.textareacontent"></textarea>
<br/>
<input type="radio" ng-model="form.gender" value="female" />Female ...
<input type="radio" ng-model="form.gender" value="male" />Male <br/>
<br/>
<input type="checkbox" ng-model="form.member" />Already a member
<br/>
<input type="submit" ngClick="Submit" >
</form>
</div>
感谢所有提供帮助的人!
如果你想在php中使用$_POST,并且不包括jquery并使用类似$.praram()的函数,那么对于纯anjularjs,你应该修改app.js并添加以下行:
.config( [ '$httpProvider',
function ( $httpProvider ) {
// Use x-www-form-urlencoded Content-Type
$httpProvider.defaults.headers.post[ 'Content-Type' ] = 'application/x-www-form-urlencoded;charset=utf-8';
/**
* The workhorse; converts an object to x-www-form-urlencoded serialization.
* @param {Object} obj
* @return {String}
*/
var param = function ( obj ) {
var query = '',
name, value, fullSubName, subName, subValue, innerObj, i;
for ( name in obj ) {
value = obj[ name ];
if ( value instanceof Array ) {
for ( i = 0; i < value.length; ++i ) {
subValue = value[ i ];
fullSubName = name + '[' + i + ']';
innerObj = {};
innerObj[ fullSubName ] = subValue;
query += param( innerObj ) + '&';
}
} else if ( value instanceof Object ) {
for ( subName in value ) {
subValue = value[ subName ];
fullSubName = name + '[' + subName + ']';
innerObj = {};
innerObj[ fullSubName ] = subValue;
query += param( innerObj ) + '&';
}
} else if ( value !== undefined && value !== null )
query += encodeURIComponent( name ) + '=' + encodeURIComponent( value ) + '&';
}
return query.length ? query.substr( 0, query.length - 1 ) : query;
};
// Override $http service's default transformRequest
$httpProvider.defaults.transformRequest = [
function ( data ) {
return angular.isObject( data ) && String( data ) !== '[object File]' ? param( data ) : data;
}
];
}] )
相关文章:
- 如何从pdftron webviewer获取表单数据
- JS验证ajax返回的html中的表单数据
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- 将单击事件添加到数据表
- 预览数据表单
- Ajax数据表单序列化防止双重提交
- 如何在 Spring Framework 中处理表数据表单提交
- 发布大型数据表单 Angular JS
- 覆盖Magento中的默认数据表单提交JS活动
- 保存不带按钮的数据表单
- 更新Highchart数据表单导出按钮
- 将数据表单转换为PDF
- 我的Angular视图没有用数据表单服务器更新
- 如何在不重新加载页面的情况下获取数据表单数据库
- JavaScript SDK返回数据表单嵌套函数
- 使用php AJAX发送数据表单请求失败
- 数据表单$scope在Angular的view (page)中不显示
- 实时交换 HTML 数据表单
- 搜索parse.com数据表单html输入
- 如何在MVC中返回JSON数据表单控制器到jsp