浅谈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 相关文章推荐
innerHTML,outerHTML,innerTEXT三者之间的区别
Jan 28 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
javaScript实现滚动新闻的方法
Jul 30 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
Jan 12 Javascript
使用D3.js制作图表详解
Aug 13 Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 Javascript
vue项目环境变量配置的实现方法
Oct 12 Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 Javascript
vue-router实现编程式导航的代码实例
Jan 19 Javascript
Django+vue跨域问题解决的详细步骤
Jan 20 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
Jun 13 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 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
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
PHP关联链接常用代码
2012/11/05 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
jquery+json实现数据二级联动的方法
2015/11/28 Javascript
JS获取复选框的值,并传递到后台的实现方法
2016/05/30 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
2018/08/31 Javascript
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
领导的自我鉴定
2013/12/28 职场文书
建筑总经理岗位职责
2014/02/02 职场文书
生物科学专业职业规划书范文
2014/02/11 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书
餐厅服务员岗位职责
2015/02/09 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS