浅谈Web页面向后台提交数据的方式和选择


Posted in Javascript onSeptember 23, 2016

1、通过表单提交

这是HTML支持最传统的提交方法,需要创建表单,然后表单包含各种类型的表单元素,还要有一个提交按钮,通过提交按钮来提交到后台,这种方式提交后页面会刷新。

2、通过网页链接提交

可以在网页的链接附上需要提交的参数,当用户点击链接后,浏览器发起向链接的访问,从而也把链接附带的参数提交到后台,这种方式提交后页面也会刷新。

3、通过ajax提交

Javascript支持ajax方式创建HTTP请求,可以通过在HTML页面元素的事件处理函数中创建ajax请求,在url参数里携带所需提交的参数,从而提交到后台,这种方式提交后页面不会刷新。

在实际Web页面中,我们要根据实际用户交互的需要来选择合适的提交方式。

1、如果需要使用一些的表单类型用户输入,比如文本框、单选框、下拉框,那么可以选择第1种和第3种方式,如果希望提交后页面刷新就选第1种,如果不希望提交后页面刷新就选第3种。

2、如果不需要表单类型输入,那么可以选择第2种和第3种方式,如果希望提交后页面刷新就选第2种,如果不希望提交后页面刷新就选第3种。

如果一个表单里有需要有多个提交按钮怎么办呢?

比如一个表单里的提交按钮所指向的处理页面不同,这样由于表单在定义的时候就已经确定下表单数据的处理页面,所以单纯地在表单里放多个提交按钮是没有办法达到目的的。这就需要javascript。

首先定义一个函数:

<script language=javascript> 
function query(){ 
form.action=”query.php”; 
form.submit();} 
function update(){ 
form.action=”update.php”; 
form.submit();} 
</script>

通过javascript改变form的action属性值,这样就可以实现多提交按钮而且功能不同了,页面内代码如下:

<form name=”form” method=”post” action=”#”> 
<input type=”button” name=”query” onclick=”query();” value=”查询”> 
<input type=”button” name=”update” onclick=”update();” value=”更新”> 
</form>

以上就是小编为大家带来的浅谈Web页面向后台提交数据的方式和选择的全部内容了,希望对大家有所帮助,多多支持三水点靠木~

Javascript 相关文章推荐
createElement动态创建HTML对象脚本代码
Nov 24 Javascript
让checkbox不选中即将选中的checkbox不选中
Jul 11 Javascript
Node.js中创建和管理外部进程详解
Aug 16 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
JS中数组重排序方法
Nov 11 Javascript
TypeScript学习之强制类型的转换
Dec 27 Javascript
vuejs父子组件通信的问题
Jan 11 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
Dec 06 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 Javascript
React倒计时功能实现代码——解耦通用
Sep 18 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
Sep 23 #Javascript
打造自己的jQuery插件入门教程
Sep 23 #Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 #Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 #Javascript
jQuery实现边框动态效果的实例代码
Sep 23 #Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
Sep 23 #Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 #Javascript
You might like
咖啡的化学
2021/03/03 咖啡文化
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
js 深拷贝函数
2008/12/04 Javascript
让网页根据不同IE版本显示不同的内容
2009/02/08 Javascript
JavaScript类库D
2010/10/24 Javascript
浅析jquery的作用与优势
2013/12/02 Javascript
javascript搜索框效果实现方法
2015/05/14 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
js判断浏览器是否支持严格模式的方法
2016/10/04 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
js canvas实现5张图片合成一张图片
2019/07/15 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
python函数装饰器用法实例详解
2015/06/04 Python
python的random模块及加权随机算法的python实现方法
2017/01/04 Python
Python3中的json模块使用详解
2018/05/05 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
python super()函数的基本使用
2020/09/10 Python
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
五型班组建设方案
2014/02/10 职场文书
财务主管岗位职责
2014/02/28 职场文书
国贸专业求职信
2014/06/28 职场文书
党建目标管理责任书
2014/07/25 职场文书
入党积极分子批评与自我批评思想汇报
2014/09/14 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
图书馆义工感想
2015/08/07 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL