在AngularJS出现之前，很多开发人员都面临表单提交的问题。提交表格的方式复杂多样，很容易让人发疯.然而，它仍然让人疯狂。

今天，我们将看看过去用PHP提交的表单，以及现在如何将它们转换为用Angular提交。对我来说，使用Angular处理表单是一个“啊哈”时刻。即使它甚至不涉及多少Angular surface，但它可以帮助用户在提交后看到表单的潜力，并理解两种数据绑定方法。

我们将在这个过程中使用jQuery平台。因此，应该首先使用javascript。我们将提交表单，显示错误消息，添加错误类，并在javascript中显示和隐藏信息。

之后，我们将使用Angular。在使用它之前，我们必须做大多数必要的工作，我们以前做过的许多工作将非常容易。我们开始吧。

单形

我们将重点介绍两种提交表单的方式：

老方法：jQuery和PHP提交表单新方法：AngularJS和PHP提交表单先来看看我们的表单，超级简单：

形式要求

在不刷新表单处理的情况下实现页面。如有错误，显示错误提示。如果输入错误，将输入变成红色。如果所有内容都正常，显示成功提示的文档结构

在我们的演示中，只需要两个文档

index.html process.php的表单处理

让我们创建一个新的PHP来处理表单。这个页面很小，POST用来提交数据。

处理表格：对我们来说没那么重要。您可以使用您喜欢的其他语言来处理表单。

//process.php？PHP $ errors=array()；//保存验证错误的数组$ data=array()；//返回数据的数组//验证变量====================================================================================================if(空($_POST[；if(空($_POST['超级英雄'])$ errors['超级英雄']='需要超级英雄别名'；//返回响应============================================================================================empty($errors)) { //如果我们的errors数组中有项目，则返回那些errors $ data[' success ']=false；$ data[' errors ']=$ errors；} else { //如果没有错误，返回一条消息$ data[' success ']=true；$data['message']='成功！'；} //将我们所有的数据返回到一个AJAX调用echo JSON _ encode($ data)；这是一个非常简单的表单处理脚本。我们只检查数据是否存在，如果存在，我们不会做任何处理和操作；如果它不存在，您需要向$errors数组添加一条消息。为了返回AJAX调用的数据，我们需要使用echo和json_encode。这就是我们在PHP表单处理中需要做的。使用普通的jQuery AJAX或Angular处理表单也是如此。显示表单

让我们创建一个HTML来显示我们的表单

！index.html！doctype htmlhtmlhead角形/标题！- LOAD BOOTSTRAP CSS - link rel='样式表href='//netdna。bootstrapcdn。com/BOOTSTRAP/3。0 .2/CSS/BOOTSTRAP。量滴CSS '！- LOAD JQUERY -！-在构建有角的应用程序时，您通常不想使用jquery -！-我们在这里打破了这个规则，因为jQuery是$。参数将帮助我们向服务器端编程语言（Professional Hypertext Preprocessor的缩写）脚本发送数据，以便服务器端编程语言（Professional Hypertext Preprocessor的缩写）可以识别它-!——这是jQuery唯一的用途。在棱角分明的应用中避免它，如果有人有关于如何将数据发送到不带jQuery的服务器端编程语言（Professional Hypertext Preprocessor的缩写）脚本的提示，请在注释-脚本src=' http://Ajax。谷歌API。com/Ajax/libs/jQuery/2。0 .3/jQuery。量滴js '/脚本中陈述！-用创建交互式、快速动态网页应用的网页开发技术处理表单（旧)-脚本！-我们将在此处理我们的表单-/script/headdydiv class=' container ' div class=' col-MD-6 col-MD-offset-3 '！-PAGE TItle-div class=' PAGE-header ' h1 span class=' glyphicon-glyphicon-tower '/span用角度/h1 /div提交表单！-SHOW ERROR/SUCCESS MESSAGES-div id=' MESSAGES '/div！-表单-表单！-NAME-div id=' NAME-group ' class=' form-group '标签名称/标签输入类型=' text ' NAME=' NAME ' class=' form-control '占位符=' Bruce Wayne ' span=' help-block '/span/div！-超级英雄名称-div id='超级英雄-组' class='表单-组'标签超级英雄别名/标签输入类型=' text ' NAME=' SUPERHER Alias ' class=' form-control '占位符='卡佩十字军span class=' help-block '/span/div！-SUBMIST BUTTON-BUTTON类型=' SUBMIT ' span=' BTN BTN-成功BTN-LG BTN-block ' span=' glyphicon-flash '/span SUBMIT！/button /form /div/div/body/html现在，我们有了表单。我们另外还使用了引导程序来使表单看起来不是那么丑。使用引导程序语法规则，每个投入下含有一个地点来展示我们文本的错误信息。

使用jQuery提交表单

现在，让我们来使用jQuery处理表单提交。我会将所有的代码添加到空的脚本标签中

！index.html.-使用创建交互式、快速动态网页应用的网页开发技术处理表单（旧)-脚本$(文档)。就绪(函数(){ //处理表单$('form ').提交(函数(事件){ //移除过去的错误$('#name-group ').remove CLaSS(' has-error ')；$('#name-group .帮助-阻止')。empty()；$(' #超级英雄组')。remove CLaSS(' has-error ')；$(' #超级英雄-组。帮助-阻止')。empty()；//删除成功消息$(“# messages”).移除类(“alert alert-success”).empty()；//获取表单数据var formData={ ' name ' : $(' input[name=name]').val()，"超级英雄": $("输入[名称=超级英雄]")。val()}；//处理表单$。ajax({ type : 'POST '，url : 'process.php '，data : formData，dataType : 'json '，success : function(data) { //将数据记录到控制台，这样我们就可以看到console.log(数据);//如果验证失败//添加错误类以显示红色输入//将错误消息添加到输入if(！数据。成功){ if(数据。错误。名称){ $(' # name-group ').addCLaSS(' has-error ')；$('#name-group .帮助-阻止')。html(数据。错误。姓名)；} if(数据。错误。超级英雄){ $(' #超级英雄组').addCLaSS(' has-error ')；$(' #超级英雄-组。帮助-阻止')。html(数据。错误。超级英雄)；} } else { //如果验证良好，添加成功消息$(“# messages”).addClass('警报警报-成功').追加(“p”数据。消息'/p ')；} } });//停止表单提交和刷新事件。prevent default()；});});/script.这里处理表单有不少的代码。我们有获取表单中变量的代码，有使用创建交互式、快速动态网页应用的网页开发技术将数据发送至我们的表单的代码，有检查是否有错和显示成功提示的代码。除此之外，我们希望每次表单提交之后，过去的错误信息都会被清除。确实是不少代码。

现在，如果表单中含有错误，则：

如果提交成功：

现在，让我们看看如何使用Angular提交相同的表单。请记住，我们不需要改变任何关于我们的PHP如何处理表单的东西，我们的应用程序仍然会有相同的功能(在同一个地方显示错误和成功信息)。

使用角度提交表单

我们将在之前使用的脚本标签中设置我们的Angular应用程序。所以删除内容，我们就可以开始了。设置角度应用程序

步骤如下：

1.角载荷

2.设置模块

3.这是控制器

4.将模块和控制器应用于HTML

5.设置双向变量绑定

6.这是一个错误和信息

看起来内容很多，但最终，我们将使用非常少的代码，并且看起来非常简洁。此外，用更多的输入创建更大的表单会更容易。

角度组件和控制器

首先，加载角度并创建新的组件和控制器

！index.html.-LOAD JQUERY-script src=' http://Ajax . googleapis.com/Ajax/libs/JQUERY/2 . 0 . 3/JQUERY . min . js '/script！-LOAD ANGULAR-script src=' http://Ajax . googleapis.com/Ajax/libs/ANGULAR js/1 . 2 . 0/ANGULAR . min . js '/script！-使用AJAX处理表单(新)-脚本//定义角度模块/app var FOrmapp=angular . module(' FOrmapp '，[])；//创建角度控制器并传入$scope和$http函数formController($scope，$http) { } /script/head！-将模块和控制器应用于我们的身体，因此Angular应用于那个身体ng-app=' formpp ' ng-controller=' form controller '.现在，我们有了角度应用的基础。我们已经加载了Angular，创建了组件模块和控制器，并将其应用到我们的网站上。

接下来，我将展示双向绑定是如何工作的。

双向数据绑定

这是Angular的核心思想之一，也是最强大的内容之一。在Angular文档中，我们看到：“Angular web应用程序中的数据绑定是模型层和视图层之间数据的自动同步。”这意味着我们需要抓取表单中的数据，不需要使用$('input[name=name]')。val()。

我们在Angular中把数据和变量绑定在一起，不管是javascript还是view，只要有变化，两者都会变化。

为了演示数据绑定，我们需要获取表单的输入来自动填充变量formData。让我们回到应用于页面的角度控制器。我们讨论了$scope和$http。

$scope:控制器和视图层之间的粘合剂。基本上，变量使用$scope在我们的控制器和视图层之间传输和交换。有关详细定义，请参考文档。

$ http: angular服务，帮助我们处理POST请求。有关更多信息，请参见文档。

使用数据绑定获取变量

好了，废话少说。我们将这些讨论应用到表单中。这个方法比上面讨论的简单。我们希望向角度控制器添加一行，向视图添加一行。

！index.html.-使用AJAX处理表单(新)-脚本//定义角度模块/app var FOrmapp=angular . module(' FOrmapp '，[])；//创建角度控制器并传入$scope和$http函数formController($scope，$http) { //创建一个空白对象来保存我们的表单信息//$scope将允许这在controller和view $scope之间传递. formdata={ }；} .现在，我们已经创建了一个formData对象。让我们用表单数据填充它。在调用每个输入并获取val()之前，我们用ng-model将一个特殊的输入绑定到变量。

！index.html.-表单-表单！-NAME-div id=' NAME-group ' class=' form-group ' label NAME/label输入类型=' text ' NAME=' NAME ' class=' form-control '占位符=' Bruce Wayne ' ng-model=' form data . NAME ' span class=' help-block '/span/div！-SUPERHERO NAME-div id=' SUPERHERO-group ' class=' form-group ' label SUPERHERO Alias/label输入类型=' text ' NAME=' SUPERHERO Alias ' class=' form-control '占位符='Caped十字军' ng-model=' formdata . SUPERHERO Alias ' span class=' help-block '/span/div！- SUBMIT BUTTON - button类型=' SUBMIT ' class=' BTN BTN-success BTN-LG BTN-block ' span class=' glyphicon glyphicon-flash '/span Submit！/按钮/表单！-在输入时显示输入数据-pre {{formData}}/pre.现在，因为Angular已经把每个输入和formdata联系起来了。当你进入每个输入框时，你可以看到formData对象被填充了！很酷吧！

您不必在视图中使用$scope。一切都被认为嵌入在$scope中。使用表单

在我们的旧表单中，我们使用jQuery提交表单，比如$(“form”)。提交()。现在我们使用Angular的一个名为ng-submit的特性。为此，我们需要添加一个控制器函数来处理表单，然后告诉我们表单使用这个控制器函数：

！index.html.-使用AJAX处理表单(新)-脚本//定义角度模块/app var FOrmapp=angular . module(' FOrmapp '，[])；//创建角度控制器并传入$scope和$http函数formController($scope，$http) { //创建一个空白对象来保存我们的表单信息//$scope将允许这在controller和view $scope之间传递. formdata={ }；//处理表单$ scope . processform=function(){ }；} .-form-form ng-submit=' process form()'.现在我们的表单知道在提交时使用控制器功能。现在它已经就位，让我们使用$http来处理表单。

处理表单的语法看起来与原始方式非常相似。这样做的好处是，我们不需要手动抓取表单数据，或者注入、隐藏或添加类来显示错误或成功信息。

！index.html.//处理表单$ scope . processform=function(){ $ http({ method : ' POST '，url : 'process.php '，data : $。param($scope.formData)，//将数据作为字符串传入头： { ' Content-Type ' : ' application/x-www-form-URL encoded ' }//将头设置为将信息作为表单数据(而不是请求有效负载)})。成功(函数(数据){ console.log(数据))；if(！data.success) { //如果不成功，则将错误绑定到错误变量$ scope . error name=data . errors . name；$ scope . error superhero=data . errors . superheroarias；} else { //如果成功，将成功消息绑定到message $ scope . message=data . message；} });};这是我们的表格！未添加或删除任何类。每次提交表格时，我们都需要意识到错误。我们只需要绑定我们需要的变量和视图。这很好，因为处理器用于处理数据，视图用于显示数据。

jQuery开机自检与角度开机自检

有时，您可以通过POST提交在服务器中看不到的数据，因为jQuery和Angular以不同的方式序列化和发送数据。这是由于您使用的服务器语言及其理解Angular提交的数据的能力。

以上代码应用于PHP服务器，jQuery对于$。参数函数。虽然有很多方法可以在不使用jQuery的情况下实现上面提到的内容，但是在这个例子中使用jQuery的唯一原因是它更简单。

以下简洁的语法将基于您的服务器端语言工作。

简明语法

这个例子是以字符串形式发送数据，并发送你的头信息。如果您不需要这些，并且希望Angular的$http POST尽可能简洁，我们可以使用速记方法：

.$http.post('process.php '，$scope.formData)。成功(功能(数据){ 0.});绝对更简单更容易记住。

$http内部控制器：理想情况下，您可以从控制器向服务移除$http请求。这只是为了演示，我们将尽快在服务上讨论。

在视图中显示错误和信息

我们将使用指令ng-show和ng-class来处理我们的视图，而Angular括号允许我们将变量放置在我们需要的地方。

Ng-show:根据变量值的存在显示或隐藏元素。文档ng-class:根据变量值(或一些其他表达式)的存在来添加或移除类。文件！index.html.-SHOW ERROR/SUCCESS MESSAGES-div id=' MESSAGES ' ng-SHow=' message ' { MEssage } }/div！-表单-表单！-NAME-div id=' NAME-group ' class=' form-group ' ng-class=' { ' has-error ' : error NAME } ' label NAME/label input type=' text ' NAME=' NAME ' class=' form-control ' placeholder=' Bruce Wayne ' span class=' help-block ' ng-show=' error NAME ' { error NAME } }/span/div！-SUPERHERO NAME-div id=' SUPERHERO-group ' class=' form-group ' ng-class=' { ' has-error ' : error SUPERHERO } ' Label SUPERHERO Alias/Label输入类型=' text ' NAME=' super hero Alias ' class=' form-control '占位符=' capped crusher ' span class=' help-block ' ng-show=' error super hero ' { error super hero } }/span/div.我们的表格完成了！借助强大的Angular，我们可以从视图中移除这些愚蠢的js代码逻辑。现在我们的js文件只用于处理数据，视图可以做自己的事情。

我们的类和错误/成功消息将在可用时显示，但在不可用时隐藏。当我们不必担心是否像使用旧的javascript那样考虑了所有事情时，这就更容易了。您不必担心在提交每个表单时是否记得隐藏错误消息。

角度表单验证有关表单验证的更多信息，请阅读我们的另一篇文章：角度表单验证。结束语

现在我们已经把所有美丽的形状都变成了棱角分明的形状。我们一起学习了很多概念。我希望你和他们有更多的接触，他们会更容易使用。

查看：

创建Angular模块创建Angular控制器双向数据绑定ng-模型绑定输入ng-单击提交表单使用双向数据绑定显示表单错误根据变量是否存在显示div根据变量是否存在添加一个类这些Angular技术将用于更大的应用程序，您可以使用它们来创建许多好东西。祝您的棱角之旅愉快。敬请期待更深入的文章。同时，您可以通过深入了解Angular的指南、服务和制造商，继续学习Angular。