AngularJS提交表单的方式(一)

作者：Zhangjingy2502870421 | 来源：互联网 | 2023-10-15 13:14

英文原文：SubmittingAJAXForms:TheAngularJSWay在AngularJS出现之前，很多开发者就面对了表单提交这一问题。由于提

英文原文&＃xff1a;Submitting AJAX Forms: The AngularJS Way

在AngularJS出现之前&＃xff0c;很多开发者就面对了表单提交这一问题。由于提交表单的方式繁杂而不同&＃xff0c;很容易令人疯掉……然而现在看来&＃xff0c;依然会让人疯掉。
今天&＃xff0c;我们会看一下过去使用PHP方式提交的表单&＃xff0c;现在如何将其转换为使用Angular提交。使用Angular来处理表单&＃xff0c;对我而言&＃xff0c;是一个“啊哈”时刻&＃xff08;译者&＃xff1a;表示了解或发现某事物的喜悦&＃xff09;。即使它甚至都没有涉及多少Angular表层的东西&＃xff0c;但是它却帮助用户看到表单提交之后的潜力&＃xff0c;并且理解两种数据绑定方式。
我们会使用jQuery平台来进行这个处理过程。所以所要做的工作首先使用Javascript。我们会提交表单&＃xff0c;展示错误信息&＃xff0c;添加错误类&＃xff0c;并且在Javascript中显示和隐藏信息。

之后&＃xff0c;我们会使用Angular。在使用之前&＃xff0c;我们要做大部分所需的工作&＃xff0c;并且我们之前所做的很多工作会非常容易。让我们开始吧。
仅使用jQuery和AJAX提交表单&＃xff1a;如果你想看一篇完整的关于仅使用jQuery和AJAX提交表单的文章&＃xff0c;请参见我们的另一篇文章&＃xff1a;使用jQuery提交表单的方式。
简单的表单
我们会关注两种提交表单的方式&＃xff1a;
旧方法&＃xff1a;jQuery和PHP提交表单
新方法&＃xff1a;AngularJS和PHP提交表单
首先看一下我们的表单&＃xff0c;超级简单&＃xff1a;
这里写图片描述
submitting-forms-with-angular
形式要求
实现页面无刷新表单处理
输入姓名和超级英雄别名
如果有错误&＃xff0c;显示错误提示
如果输入有误&＃xff0c;将输入变成红色
如果所有内容ok&＃xff0c;显示成功提示
文档结构
在我们的展示中&＃xff0c;仅需两个文件
index.html
process.php

表单处理

让我们新建一个PHP来处理表单。该页面非常小并且使用POST方式提交数据。
处理表单&＃xff1a;这对我们来说并不是那么重要的。你可以使用其他你喜欢的语言来处理你的表单。
// process.php

$errors &＃61; array(); // array to hold validation errors $data &＃61; array(); // array to pass back data// validate the variables &＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;if (empty($_POST[&＃39;name&＃39;]))$errors[&＃39;name&＃39;] &＃61; &＃39;Name is required.&＃39;;if (empty($_POST[&＃39;superheroAlias&＃39;]))$errors[&＃39;superheroAlias&＃39;] &＃61; &＃39;Superhero alias is required.&＃39;;// return a response &＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;// response if there are errorsif ( ! empty($errors)) {// if there are items in our errors array, return those errors$data[&＃39;success&＃39;] &＃61; false;$data[&＃39;errors&＃39;] &＃61; $errors;} else {// if there are no errors, return a message$data[&＃39;success&＃39;] &＃61; true;$data[&＃39;message&＃39;] &＃61; &＃39;Success!&＃39;;}// return all our data to an AJAX callecho json_encode($data);

这是一个非常简单的表单处理脚本。我们仅检查数据是否存在&＃xff0c;如果存在&＃xff0c;则不做任何处理和操做&＃xff1b;如果不存在&＃xff0c;则需要向$errors数组中添加一条信息。
为了返回我们的数据用于AJAX调用&＃xff0c;我们需要使用echo和json_encode。这就是我们PHP表单处理所有需要做的操作。使用普通的jQuery AJAX或者Angular处理表单也是这样的。

展示表单

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

<html> <head><title>Angular Formstitle><link rel&＃61;"stylesheet" href&＃61;"//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"><script src&＃61;"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js">script><script>script> head> <body> <div class&＃61;"container"> <div class&＃61;"col-md-6 col-md-offset-3"><div class&＃61;"page-header"><h1><span class&＃61;"glyphicon glyphicon-tower">span> Submitting Forms with Angularh1>div><div id&＃61;"messages">div><form><div id&＃61;"name-group" class&＃61;"form-group"><label>Namelabel><input type&＃61;"text" name&＃61;"name" class&＃61;"form-control" placeholder&＃61;"Bruce Wayne"><span class&＃61;"help-block">span>div><div id&＃61;"superhero-group" class&＃61;"form-group"><label>Superhero Aliaslabel><input type&＃61;"text" name&＃61;"superheroAlias" class&＃61;"form-control" placeholder&＃61;"Caped Crusader"><span class&＃61;"help-block">span>div><button type&＃61;"submit" class&＃61;"btn btn-success btn-lg btn-block"><span class&＃61;"glyphicon glyphicon-flash">span> Submit!button>form>div> div> body> html>

现在&＃xff0c;我们有了表单。我们另外还使用了Bootstrap来使表单看起来不是那么丑。使用Bootstrap语法规则&＃xff0c;每个input下含有一个spot来展示我们文本的错误信息。
这里写图片描述

使用jQuery提交表单

现在&＃xff0c;让我们来使用jQuery处理表单提交。我会将所有的代码添加到空的

...<script>$(document).ready(function() {// process the form$(&＃39;form&＃39;).submit(function(event) {// remove the past errors$(&＃39;#name-group&＃39;).removeClass(&＃39;has-error&＃39;);$(&＃39;#name-group .help-block&＃39;).empty();$(&＃39;#superhero-group&＃39;).removeClass(&＃39;has-error&＃39;);$(&＃39;#superhero-group .help-block&＃39;).empty();// remove success messages$(&＃39;#messages&＃39;).removeClass(&＃39;alert alert-success&＃39;).empty();// get the form datavar formData &＃61; {&＃39;name&＃39; : $(&＃39;input[name&＃61;name]&＃39;).val(),&＃39;superheroAlias&＃39; : $(&＃39;input[name&＃61;superheroAlias]&＃39;).val()};// process the form$.ajax({type : &＃39;POST&＃39;,url : &＃39;process.php&＃39;,data : formData,dataType : &＃39;json&＃39;,success : function(data) {// log data to the console so we can seeconsole.log(data);// if validation fails// add the error class to show a red input// add the error message to the help block under the inputif ( ! data.success) {if (data.errors.name) {$(&＃39;#name-group&＃39;).addClass(&＃39;has-error&＃39;);$(&＃39;#name-group .help-block&＃39;).html(data.errors.name);}if (data.errors.superheroAlias) {$(&＃39;#superhero-group&＃39;).addClass(&＃39;has-error&＃39;);$(&＃39;#superhero-group .help-block&＃39;).html(data.errors.superheroAlias);}} else {// if validation is good add success message$(&＃39;#messages&＃39;).addClass(&＃39;alert alert-success&＃39;).append(&＃39;

&＃39; &＃43; data.message &＃43; &＃39;

&＃39;);}}});// stop the form from submitting and refreshingevent.preventDefault();});});script>...

这里处理表单有不少的代码。我们有获取表单中变量的代码&＃xff0c;有使用AJAX将数据发送至我们的表单的代码&＃xff0c;有检查是否有错和显示成功提示的代码。除此之外&＃xff0c;我们希望每次表单提交之后&＃xff0c;过去的错误信息都会被清除。确实是不少代码。
现在&＃xff0c;如果表单中含有错误&＃xff0c;则&＃xff1a;
这里写图片描述
如果提交成功&＃xff1a;

现在&＃xff0c;让我们看使用Angular来提交相同的表单。记住&＃xff0c;我们不需要更改任何关于我们的PHP如何处理表单的内容&＃xff0c;我们的应用依然会具备相同的功能&＃xff08;在同一个地方展示错误和成功信息&＃xff09;。

AngularJS 提交表单的方式(二)

推荐阅读

instance
新浪笔试题

1:有如下一段程序：packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]

蜡笔小新 2024-12-27 19:32:17
数组
深入理解Cookie与Session会话管理

本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息，以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制，解释其原理及应用场景。 ... [详细]

蜡笔小新 2024-12-27 18:20:43
数组
高效解决应用崩溃问题！友盟新版错误分析工具全面升级

友盟推出的最新版错误分析工具，专为移动开发者设计，提供强大的Crash收集与分析功能。该工具能够实时监控App运行状态，快速发现并修复错误，显著提升应用的稳定性和用户体验。 ... [详细]

蜡笔小新 2024-12-26 14:11:47
数组
2023 ARM嵌入式系统全国技术巡讲

2023 ARM嵌入式系统全国技术巡讲旨在分享ARM公司在半导体知识产权(IP)领域的最新进展。作为全球领先的IP提供商，ARM在嵌入式处理器市场占据主导地位，其产品广泛应用于90%以上的嵌入式设备中。此次巡讲将邀请来自ARM、飞思卡尔以及华清远见教育集团的行业专家，共同探讨当前嵌入式系统的前沿技术和应用。 ... [详细]

蜡笔小新 2024-12-28 11:58:48
数组
国内BI工具迎战国际巨头Tableau，稳步崛起

尽管商业智能（BI）工具在中国的普及程度尚不及国际市场，但近年来，随着本土企业的持续创新和市场推广，国内主流BI工具正逐渐崭露头角。面对国际品牌如Tableau的强大竞争，国内BI工具通过不断优化产品和技术，赢得了越来越多用户的认可。 ... [详细]

蜡笔小新 2024-12-28 11:12:44
数组
深入理解 Oracle 存储函数：计算员工年收入

本文介绍如何使用 Oracle 存储函数查询特定员工的年收入。我们将详细解释存储函数的创建过程，并提供完整的代码示例。 ... [详细]

蜡笔小新 2024-12-28 09:49:42
数组
2018回顾与2019展望

本文总结了2018年的关键成就，包括职业变动、购车、考取驾照等重要事件，并分享了读书、工作、家庭和朋友方面的感悟。同时，展望2019年，制定了健康、软实力提升和技术学习的具体目标。 ... [详细]

蜡笔小新 2024-12-28 09:10:26
数组
四载相伴，与51CTO学院共成长

在计算机技术的学习道路上，51CTO学院以其专业性和专注度给我留下了深刻印象。从2012年接触计算机到2014年开始系统学习网络技术和安全领域，51CTO学院始终是我信赖的学习平台。 ... [详细]

蜡笔小新 2024-12-28 08:20:07
数组
CSS 布局：液态三栏混合宽度布局

本文介绍了如何使用 CSS 实现液态的三栏布局，其中各栏具有不同的宽度设置。通过调整容器和内容区域的属性，可以实现灵活且响应式的网页设计。 ... [详细]

蜡笔小新 2024-12-28 02:40:28
数组
Linux 系统启动故障排除指南：MBR 和 GRUB 问题

本文详细介绍了 Linux 系统启动过程中常见的 MBR 扇区和 GRUB 引导程序故障及其解决方案，涵盖从备份、模拟故障到恢复的具体步骤。 ... [详细]

蜡笔小新 2024-12-27 20:40:29
数组
通过类型和标签选择元素

本文介绍了如何使用jQuery根据元素的类型（如复选框）和标签名（如段落）来获取DOM对象。这有助于更高效地操作网页中的特定元素。 ... [详细]

蜡笔小新 2024-12-27 19:44:14
main
Dockerfile 编写与 Docker 网络配置详解

本文详细介绍了 Dockerfile 的编写方法及其在网络配置中的应用，涵盖基础指令、镜像构建与发布流程，并深入探讨了 Docker 的默认网络、容器互联及自定义网络的实现。 ... [详细]

蜡笔小新 2024-12-27 17:31:41
数组
JQuery基础：省市联动与表单验证

本文介绍了如何使用JQuery实现省市二级联动和表单验证。首先，通过change事件监听用户选择的省份，并动态加载对应的城市列表。其次，详细讲解了使用Validation插件进行表单验证的方法，包括内置规则、自定义规则及实时验证功能。 ... [详细]

蜡笔小新 2024-12-27 17:10:48
get
分页插件3指定到某一页

前言--页数多了以后需要指定到某一页（只做了功能，样式没有细调）html ... [详细]

蜡笔小新 2024-12-27 15:19:01
post
扫描线三巨头 hdu1928hdu 1255 hdu 1542 [POJ 1151]

学习链接：http:blog.csdn.netlwt36articledetails48908031学习扫描线主要学习的是一种扫描的思想，后期可以求解很 ... [详细]

蜡笔小新 2024-12-26 20:04:36

Zhangjingy2502870421

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章