详细分析使用AngularJS编程中提交表单的方式(4)

有时能看到用POST方式提交在服务器中看不到数据,这是因为jQuery和Angular的序列化和发送数据的方式不同。这归结于你所使用的服务器语言和它理解Angular提交的数据的能力。

上面的代码是应用于PHP服务器的,jQuery对于$.param函数则是必需的。虽然实现上文中提到的内容有非常多不使用jQuery的方法,但在本实例中,使用jQuery的唯一原因就是,它更简单。

下面简洁的语法将会基于你服务器端语言来工作。

简洁语法

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

... $http.post('process.php', $scope.formData) .success(function(data) { ... }); ...

绝对更简洁更容易记住方法。

$http 内部控制器: 理想的,你可以将$http请求从controller移除到 service.这只是为了演示目的,我们将会尽快在service上进行讨论.

在视图中显示错误和信息

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

ng-show: 根据变量值是否存在来显示或隐藏元素. 文档

ng-class: 根据变量值是否存在(或一些其他表达式)来添加或移除类. 文档

<!-- index.html --> ... <!-- SHOW ERROR/SUCCESS MESSAGES --> <div ng-show="message">{{ message }}</div> <!-- FORM --> <form> <!-- NAME --> <div ng-class="{ 'has-error' : errorName }"> <label>Name</label> <input type="text" placeholder="Bruce Wayne"> <span ng-show="errorName">{{ errorName }}</span> </div> <!-- SUPERHERO NAME --> <div ng-class="{ 'has-error' : errorSuperhero }"> <label>Superhero Alias</label> <input type="text" placeholder="Caped Crusader"> <span ng-show="errorSuperhero">{{ errorSuperhero }}</span> </div> ...

我们的表单完成了!通过强大的Angular,我们可以将这些愚蠢的显示/隐藏的js代码逻辑从视图中移走 了。现在我们的js文件只用来处理数据,并且视图可以做它自己的事情了。

我们的类和错误/成功等提示信息将在可获取时显示而不可获取时隐藏。当我们无须再像使用老的javascript那样担心是否已经考虑全面,这变得更加容易。你也无须再担心是否记得隐藏每处form提交时的那些错误信息。

Angular表单验证 获取更多表单验证的信息,请研读我们另一文章:AngularJS Form Validation。
结束语

现在我们已把美观的表单全部转变为Angular的了。我们共同学习了许多概念,希望你与它们接触更多,它们也将更易用。

回顾:

    创建一个Angular module

    创建一个Angular controller

    双向数据绑定

    ng-model绑定inputs

    ng-click提交表单

    使用双向数据绑定展示表单错误

    展示一个基于是否变量存在的div

    添加一个基于是否变量存在的类

这些Angular技术将在更庞大的应用中使用,你可以用它们创建许多好东西。祝Angular之途愉快,敬请期待更多深入的文章。同时,你也可以通过深入了解其指南,服务和厂商等来继续学习Angular。

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgdfxp.html