浅谈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 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
JavaScript Cookie的读取和写入函数
Dec 08 Javascript
JavaScript随机排序(随即出牌)
Sep 17 Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
May 13 Javascript
JavaScript动态修改背景颜色的方法
Apr 16 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
vue-父子组件和ref实例详解
Nov 10 Javascript
JavaScript实现简单随机点名器
Nov 21 Javascript
微信小程序接入vant Weapp组件的详细步骤
Oct 28 Javascript
小程序实现文字循环滚动动画
Jun 14 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
领悟php接口中interface存在的意义
2013/06/27 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
动态添加js事件实现代码
2009/03/12 Javascript
JavaScript 组件之旅(三):用 Ant 构建组件
2009/10/28 Javascript
JS按字节截取字符长度实例
2013/11/20 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
JS常用算法实现代码
2016/11/14 Javascript
JS正则替换掉小括号及内容的方法
2016/11/29 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
深入理解Vuex 模块化(module)
2017/09/26 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
vue 中url 链接左边的小图标更改问题
2019/12/30 Javascript
VUE实现自身整体组件销毁的示例代码
2020/01/13 Javascript
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
[48:31]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第一场 2月2日
2021/03/11 DOTA
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
详解Python中import机制
2020/09/11 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
使用HTML5 IndexDB存储图像和文件的示例
2018/11/05 HTML / CSS
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
Structs界面控制层技术
2013/10/11 面试题
庆中秋节主题活动方案
2014/02/03 职场文书
经理管理专业毕业自荐书范文
2014/02/12 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
医学专业大学生求职信
2014/07/12 职场文书
2014年销售部工作总结
2014/12/01 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书
三年级作文之趣事作文
2019/11/04 职场文书
解决MySQL报“too many connections“错误
2022/04/19 MySQL