发表于: 2017-05-04 23:28:56

1 1118


今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin) 

Angular JS 表单验证 


明天计划的事情:(一定要写非常细致的内容) 

 在单页应用里如何通过url传参; angular的指令是什么; 如何去自定义一个指令


遇到的问题:(遇到什么困难,怎么解决的) 

form表单中method=“post/get”区别?

默认get,推荐使用post

一、问题的提出

<form action="getPostServlet/getPost.do?param4=param4" method="get"> 

<input type="hidden" name="param1" value="param1"> 

<input type="hidden" name="param2" value="param2"> 

<input type="text" name="param3" value="param3"> 

<input type="submit" name="button1" value="submit"> 

</form>

这个action带有一个参数param4,
如果用get方法提交,后台无法接收到action 属性参数;
如果用post方法提交,后台就可以接收action 属性参数;

用get方法提交的url显示如下:
http://localhost/mywebapp/getPostServlet/getPost.do?pram1=param1&pram2=param2&pram3=param3&button1=submit

也就是说method为get时action后带的参数列表会被忽视,,后台无法接收到这个参数,只能得到表单中的参数

用post方法提交的url显示如下:
http://localhost/mywebapp/getPostServlet/getPost.do?param4=param4

也就是说post方式提交表单,参数分为两部分:一部分是action中的参数放在地址栏;另一部分是表单中的参数放在请求的头中;所有的数据后台全部能获得。

一、get和post定义
form元素的method属性用来指定发送form的http方法;
使用get时,form数据集被附加到form元素的action属性所指定的URL后面;
使用post时,form数据集被包装在请求的body中并被发送。

使用get提交方式,生成URL:user.do?loginId=abc
get仅仅是拼接一个URL,然后直接向服务区请求数据,需要提交给服务器的数据集包含在URL中。
     使用post提交方式,生成URL:user.do
post会把form的数据集,即loginId=abc这个键值对包装在请求的body中,发给服务器,然后向服务器请求数据。
二、get和Post的区别
如果用get提交一个验证用户名和密码的form,一般认为是不安全的,因为用户名和密码将出现在URL上,进而出现在浏览器的历史记录中。
显然,在对安全性有要求的情况下,应该使用post 

1、get是用来从服务器上获得数据,而post是用来向服务器上传递数据

如果采用post方法,浏览器将会按照下面两步来发送数据。首先浏览器将action属性中指定的表单处理服务器建立联系,一旦建立连接之后,浏览器就会按分段传输的方法将数据发送给服务器。

在服务器端,一旦post样式的应用程序开始执行时,就应该从一个标志位置读取参数,而一旦读到参数,在应用程序能够使用这些表单值以前,必须对这些参数进行解码,用户特定的服务器会明确指定应用程序应该如何接受这些参数。
采用get方法:
浏览器会直接与表单处理服务器建立连接,然后直接在一个传输步骤中发送所有的表单数据,然后直接在一个传输步骤中发送所有的表单数据。
2、get将表单中数据的按照variable=value的形式,添加到action所指向的URL后面,并且两者使用“?”连接,而各个变量之间使用“&”连接;post是将表单中的数据放在form的数据体中,按照变量和值相对应的方式,传递到action所指向URL。
三、正确的使用get和post
当且仅当form是幂等的时候,使用get。
幂等:多次相同的请求产生的副作用,和一次请求的副作用相同。

如果提交请求纯粹只是从服务器端获取数据而不是进行其他操作,并且多次提交不会有明显的副作用,应该使用get。
比如:搜索引擎的查询(http://www.google.com/search?q=abc) 和分页(user.do?page=1)

如果提交这个请求会产生其他操作和影响,就应该使用post。
比如:修改服务器上数据库中的数据;发送一封邮件;删除一个文件等

另一个要考虑因素是安全性。

若符合下列任一情况,则用post方法:
a.请求的结果有持续性的副作用,例如:数据库内添加新的数据行。
b.若使用get方法,则表单上收集的数据可能让URL过长。
c.要传送的数据不是采用ASCII编码。

若符合下列任一情况,则用get方法:
a.请求是为了查找资源,html表单数据仅用来搜索。
b.请求结果无持续性的副作用。
c.收集的数据及html表单内的输入字段名称的总长不超过1024个字符。

post和get的一点差别就是当method为get时,action属性中URL后面的参数是忽视的
例如:
action=insert.jsp?name=tobby method=get,当我们提交之后真正的url中是没有name=tobby的,他会根据表单中的内容重新组装成一个url的,假如form中有一个文本框,<input type="text" name="address" value="wuhan">,那么url会变成insert.jsp?addresswuhan.



收获:(通过今天的学习,学到了什么知识)

ng-show 来控制 提示信息的显示与隐藏,
ngClass支持对象表达式,所以 ng-class="{'has-success': signupForm.username.$valid, 'has-error':signupForm.username.$invalid && signupForm.username.$dirty}" 这样就轻松实现了 BootStrap 里面 has-success 样式 和 has-error 样式的转换。

ngMessages 这个指令需要引入文件名为 angular-messages 的JS文件,并且需要注入到我们的ngApp模块中。 可以使用 如上所示 的 Attribute 写法,当然也支持 Element 的写法 //即 <ng-messages></ng-messages>

ngMessages 这个指令是用来控制所监听的对象的(我们所设定的)提示信息的展示与隐藏。
我比较推崇ngMessages这个指令来控制错误信息,显而易见的好处就是代码的可读性更高,也更为简洁。

HTML5新特性表单新特性——表单元素新的属性

HTML5之前表单元素可用的属性:

id、class、title、style、type、name、value、checked、selected、disabled、readonly
HTML5之前表单元素新增的属性:
(1)autocomplete:on/off,自动补全,是否自动记录之前提交的数据,以用于下一次输入建议
<input autocomplete="off">
(2)placeholder:站位符,用于在输入框中显示提示性文字,与value不同,不能被提交
<input placeholder="提示性文字">
(3)autofocus:false/true,自动获得输入焦点
<input autofocus>

(4)multiple:false/true,是否允许多个输入值,若声明了该属性,输入框中(如email)就允许输入用逗号分隔的多个值
<input type="email" multiple>
(5)form:为一个元素指定form属性,值为某个表单的ID,则此输入域可以放到表单的外部
<form id="f"></form>
<input form="f">
(6)required:false/true,必需的/必填项,在表单提交时会验证是否有输入,没有输入则弹出提示消息
<input required>

(7)maxlength:最大长度,在有输入的情况下,限定输入域中字符的个数
<input maxlength="9">
(8)minlength:最小长度,在有输入的情况下,限定输入域中字符的个数,不是HTML5标准属性,仅部分浏览器支持(如Chrome)

<input minlength="6">
(9)pattern:指定一个正则表达式,对输入进行验证
<input pattern="1[3578]\d{9}">

注意:上述正则表达式可以省略^和$

函数命名规范

  1. 函数命名:统一使用动词或者动词+名词形式 —- fnInit()

  2. 对象方法命名使用fn+对象类名+动词+名词形式 fnAnimateDoRun()

  3. 某事件响应函数命名方式为fn+触发事件对象名+事件名或者模块名 fnDivClick()

附常用的动词列表:

名称 含义 名称 含义

get 获取 set 设置

add 增加 remove 删除

create 创建 destory 移除

start 启动 stop 停止

open 打开 close 关闭

read 读取 write 写入

load 载入 save 保存

create 创建 destroy 销毁

begin 开始 end 结束

backup 备份 restore 恢复

import 导入 export 导出

split 分割 merge 合并

inject 注入 extract 提取

attach 附着 detach 脱离

bind 绑定 separate 分离

view 查看 browse 浏览

edit 编辑 modify 修改

select 选取 mark 标记

copy 复制 paste 粘贴

undo 撤销 redo 重做

insert 插入 delete 移除

add 加入 append 添加

clean 清理 clear 清除

index 索引 sort 排序

find 查找 search 搜索

increase 增加 decrease 减少

play 播放 pause 暂停

launch 启动 run 运行

compile 编译 execute 执行

debug 调试 trace 跟踪

observe 观察 listen 监听

build 构建 publish 发布

input 输入 output 输出

encode 编码 decode 解码

encrypt 加密 decrypt 解密

compress 压缩 decompress 解压缩

pack 打包 unpack 解包

parse 解析 emit 生成

connect 连接 disconnect 断开

send 发送 receive 接收

download 下载 upload 上传

refresh 刷新 synchronize 同步

update 更新 revert 复原

lock 锁定 unlock 解锁

checkout签出

check in 签入

submit 提交 commit 交付

push pull

expand 展开 collapse 折叠

begin 起始 end 结束

start 开始 finish 完成

enter 进入 exit 退出

abort 放弃 quit 离开

obsolete 废弃 depreciate 废旧

collect 收集 aggregate 聚集


返回列表 返回列表
评论

    分享到