php Angularjs - 简单的表单提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19985344/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs - simple form submit
提问by GRowing
I am going through learning curve with AngularJs and I am finding that there are virtually no examples that serve real world use.
我正在经历 AngularJs 的学习曲线，我发现几乎没有可以在现实世界中使用的示例。
I am trying to get a clear understanding of how to submit a form with the most standard components and pass it on to a PHP file..
我试图清楚地了解如何提交具有最标准组件的表单并将其传递给 PHP 文件。
My fiddle.
我的小提琴。
Does anyone have any good examples on submitting simple, un-polluted, forms that would help me and probably numerous other Angularjs beginners..
有没有人有任何关于提交简单、未受污染的表单的好例子，可以帮助我和其他许多 Angularjs 初学者。
When I say a clean form I am referring to something like this..
当我说一个干净的形式时，我指的是这样的东西..
<div ng-app="myApp">
<form name="saveTemplateData" action="#" 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/>
<textarea rows="3" cols="25" ng-model="form.textareacontent"></textarea>
<br/><br/>
<input type="radio" ng-model="form.gender" value="female" />Female ...
<input type="radio" ng-model="form.gender" value="male" />Male <br/>
<br/><br/>
<input type="checkbox" ng-model="form.member" value="5"/> Already a member
<br/><br/>
<input type="file" ng-model="form.file_profile" id="file_profile"><br/>
<input type="file" ng-model="form.file_avatar" id="file_avatar">
<br/><br/>
<!-- <button ng-click="save()" >Save</button> -->
<input type="submit" ngClick="Submit" >
</form>
</div>
My ng-app code...
我的 ng-app 代码...
var app = angular.module('myApp', []);
app.controller('FormCtrl', function ($scope, $http) {
var formData = {
firstname: "default",
emailaddress: "default",
textareacontent: "default",
gender: "default",
member: false,
file_profile: "default",
file_avatar: "default"
};
$scope.save = function() {
formData = $scope.form;
};
$scope.submitForm = function() {
console.log("posting data....");
formData = $scope.form;
console.log(formData);
//$http.post('form.php', JSON.stringify(data)).success(function(){/*success callback*/});
};
});
I guess three questions I have from here on are...
我想我从这里开始的三个问题是......
- How is my php file supposed to interact with this (how to I get the json string to an array in php file)?
- How would I submit value of a checkbox when the checkbox is true?
- I find a lot of information abotu using jQuery with Angular to submit images,, I see there is an image object in this submission already,, how do I retrieve that data? What are considerations to include with images?
- 我的 php 文件应该如何与之交互（如何将 json 字符串获取到 php 文件中的数组）？
- 当复选框为真时，如何提交复选框的值？
- 我发现了很多关于使用 jQuery 和 Angular 提交图像的信息，我看到这个提交中已经有一个图像对象，我如何检索该数据？包含在图像中的注意事项是什么？
I am willing to take any clear and concise information and assemble a good learning example for everyone...
我愿意把任何清晰简明的信息，为大家组装一个好的学习例子......
My fiddle
我的小提琴
采纳答案by GRowing
I have been doing quite a bit of research and in attempt to resolve a different issue I ended up coming to a good portion of the solution in my other post here:
我一直在做相当多的研究，并试图解决一个不同的问题，我最终在我的另一篇文章中找到了解决方案的很大一部分：
Angularjs - Form Post Data Not Posted?
The solution does not include uploading images currently but I intend to expand upon and create a clear and well working example. If updating these posts is possible I will keep them up to date all the way until a stable and easy to learn from example is compiled.
该解决方案目前不包括上传图像，但我打算扩展并创建一个清晰且有效的示例。如果可以更新这些帖子，我会一直保持更新，直到编译出一个稳定且易于学习的示例。
回答by caffeinated.tech
WARNING This is for Angular 1.x
警告这是针对 Angular 1.x
If you are looking for Angular (v2+, currently version 8), try this answeror the official guide.
如果您正在寻找 Angular（v2+，当前版本 8），请尝试此答案或官方指南。
ORIGINAL ANSWER
原答案
I have rewritten your JS fiddle here: http://jsfiddle.net/YGQT9/
我在这里重写了你的 JS 小提琴：http: //jsfiddle.net/YGQT9/
<div ng-app="myApp">
<form name="saveTemplateData" action="#" ng-controller="FormCtrl" ng-submit="submitForm()">
First name: <br/><input type="text" name="form.firstname">
<br/><br/>
Email Address: <br/><input type="text" ng-model="form.emailaddress">
<br/><br/>
<textarea rows="3" cols="25">
Describe your reason for submitting this form ...
</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" value="true"/> Already a member
<input type="checkbox" ng-model="form.member" value="false"/> Not a member
<br/>
<input type="file" ng-model="form.file_profile" id="file_profile">
<br/>
<input type="file" ng-model="form.file_avatar" id="file_avatar">
<br/><br/>
<input type="submit">
</form>
</div>
Here I'm using lots of angular directives(ng-controller, ng-model, ng-submit) where you were using basic html form submission.
Normally all alternatives to "The angular way" work, but form submission is intercepted and cancelled by Angular to allow you to manipulate the data before submission
在这里，我使用了许多 angular 指令( ng-controller, ng-model, ng-submit)，您在其中使用了基本的 html 表单提交。通常“角度方式”的所有替代方法都有效，但表单提交会被 Angular 拦截并取消，以允许您在提交前操作数据
BUTthe JSFiddle won't work properly as it doesn't allow any type of ajax/http post/get so you will have to run it locally.
但是JSFiddle 无法正常工作，因为它不允许任何类型的 ajax/http post/get，因此您必须在本地运行它。
For general advice on angular form submission see the cookbook examples
有关角度表单提交的一般建议，请参阅食谱示例
UPDATEThe cookbook is gone. Instead have a look at the 1.x guide for for form submission
更新食谱不见了。而是查看表单提交的 1.x 指南
The cookbook for angular has lots of sample code which will help as the docs aren't very user friendly.
angular 的食谱有很多示例代码，它们会有所帮助，因为文档对用户不是很友好。
Angularjs changes your entire web development process, don't try doing things the way you are used to with JQuery or regular html/js, but for everything you do take a look around for some sample code, as there is almost always an angular alternative.
Angularjs 改变了您的整个 Web 开发过程，不要尝试按照您习惯使用 JQuery 或常规 html/js 的方式做事，但是对于您所做的一切，请查看一些示例代码，因为几乎总是有一个 angular 替代方案.
回答by Akhilesh Kumar
Sending data to some service page.
将数据发送到某个服务页面。
<form class="form-horizontal" role="form" ng-submit="submit_form()">
<input type="text" name="user_id" ng-model = "formAdata.user_id">
<input type="text" id="name" name="name" ng-model = "formAdata.name">
</form>
$scope.submit_form = function()
{
$http({
url: "http://localhost/services/test.php",
method: "POST",
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: $.param($scope.formAdata)
}).success(function(data, status, headers, config) {
$scope.status = status;
}).error(function(data, status, headers, config) {
$scope.status = status;
});
}
回答by D.S
I think the reason AngularJS does not say much about form submission because it depends more on 'two-way data binding'. In traditional html development you had one way data binding, i.e. once DOM rendered any changes you make to DOM element did not reflect in JS Object, however in AngularJS it works both way. Hence there's in fact no need to form submission. I have done a mid sized application using AngularJS without the need to form submission. If you are keen to submit form you can write a directive wrapping up your form which handles ENTER keydown and SUBMIT button click events and call form.submit().
我认为 AngularJS 没有对表单提交说太多的原因是因为它更多地依赖于“双向数据绑定”。在传统的 html 开发中，您有一种数据绑定方式，即一旦 DOM 呈现您对 DOM 元素所做的任何更改，都不会反映在 JS 对象中，但是在 AngularJS 中，它可以双向工作。因此，实际上没有必要形成提交。我已经使用 AngularJS 完成了一个中型应用程序，而无需提交表单。如果您热衷于提交表单，您可以编写一个指令来包装您的表单，该指令处理 ENTER 键按下和提交按钮单击事件并调用 form.submit()。
If you want the sample source code of such a directive, please let me know by commenting on this. I figured out it would a simple directive that you can write yourself.
如果您需要此类指令的示例源代码，请对此发表评论，让我知道。我发现这是一个您可以自己编写的简单指令。
回答by antelove
var app = angular.module( "myApp", [] );
app.controller( "myCtrl", ["$scope", function($scope) {
$scope.submit_form = function(formData) {
$scope.formData = formData;
console.log(formData); // object
console.log(JSON.stringify(formData)); // string
$scope.form = {}; // clear ng-model form
}
}] );<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<form ng-submit="submit_form(form)" >
Firstname: <input type="text" ng-model="form.firstname" /><br />
Lastname: <input type="text" ng-model="form.lastname" /><br />
<hr />
<input type="submit" value="Submit" />
</form>
<hr />
<p>Firstname: {{ form.firstname }}</p>
<p>Lastname: {{ form.lastname }}</p>
<pre>Submit Form: {{ formData }} </pre>
</div>