HTML中关于表单的提交
2016-11-16 21:49
246 查看
总结一下HTML中关于表单的提交,在用户登录的时候一般都是通过表单提交,获取账号密码然后交给后端,目前主要提及三种提交表单的方式:html默认方式和js控制下的两种方式。
这一种提交方式无话可说,需要注意的是form标签内的 action属性负责提交的地址,method是提交的方式(get/post)。
注意一点就是如果不符合要求的话最后要返回false,不然弹出对话框之后还是会提交,关于这一点的原理之后再补,先挖坑。
注意post方法的格式 $.post(url, data , callback()),使用flask时后端进行的重定向,但是前端页面并没有跳转,原因可能是ajax本身对于页面的控制,或者说ajax的特性并不能使页面进行跳转,解决方法是 callback()函数中可以设置对页面进行跳转。
1.直接用html的默认方式提交
<form action="/login" method="post" id="form"> <input type="text" name="username" class="username" placeholder="请输入您的用户名!"> <input type="password" name="password" class="password" placeholder="请输入您的用户密码!"> <input type="submit" class="submit_button" id="submit_button" value="登录"> <button type="reset" class="reset_button">重置</button> </form>
这一种提交方式无话可说,需要注意的是form标签内的 action属性负责提交的地址,method是提交的方式(get/post)。
2. 使用jquery进行控制
有时候我们需要对账号密码的输入进行控制,比如要判断输入框是否为空,为空的话进一步提醒用户。为了方便使用jQuery进行操作,如下:$(document).ready(function () { $("#submit_button").click(function () { var username = $('.username').val(); var password = $('.password').val(); if (username == '') { alert("请输入账号"); return false; } else { if (password == '') { alert("请输入密码"); return false; } else $('#form').submit(); } }); });
注意一点就是如果不符合要求的话最后要返回false,不然弹出对话框之后还是会提交,关于这一点的原理之后再补,先挖坑。
3.使用ajax进行提交
同样使用jQuery,代码如下$(document).ready(function () { $("#submit_button").click(function () { var username = $('.username').val(); var password = $('.password').val(); alert(username + ' \n' + password); $.post( '{{ url_for('main.login') }}', {username: username, password: password}, function () { window.location.href = 'http://www.baidu.com';}); }); });
注意post方法的格式 $.post(url, data , callback()),使用flask时后端进行的重定向,但是前端页面并没有跳转,原因可能是ajax本身对于页面的控制,或者说ajax的特性并不能使页面进行跳转,解决方法是 callback()函数中可以设置对页面进行跳转。
相关文章推荐
- 关于HTML表单中出现双重提交的问题!
- 记忆碎片---关于html静态页面提交表单保存至数据库
- [HTML] 关于表单提交的诡异现象
- 关于提交表单的HTML小程序
- 关于HTMLdeform表单提交onclick和onsubmit
- 关于C++使用libcurl提交表单方式上传文件时提交表单参数[同HTML表单]
- HTML中关于表单的提交和输入的值是否为空
- asp.net 中将表单提交到另一页 Code-Behind(代码和html在不同的页面)
- 关于“网页对话框”中链接和表单提交会在新窗口中打开的问题
- 一直复略了的一个问题,关于表单重复提交
- asp.net 中将表单提交到另一页 Code-Behind(代码和html在不同的页面)
- 把HTML表单提交的数据转化成XML文件
- 关于“网页对话框”中链接和表单提交会在新窗口中打开的问题
- 把HTML表单提交的数据转化成XML文件
- 关于表单防重复提交一些东东
- asp.net 中将表单提交到另一页 Code-Behind(代码和html在不同的页面)
- 把HTML表单提交的数据转化成XML文件的补充
- 关于Struts里提交中文表单到ActionForm后的乱码问题。
- 把HTML表单提交的数据转化成XML文件
- HTML中Form表单提交时,采用 get和post的区别