浅谈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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
jquery调用asp.net 页面后台的实现代码
Apr 27 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
Jul 08 Javascript
倒记时60刷新网页的js代码
Feb 18 Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 Javascript
原生js调用json方法总结
Feb 22 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
浅入深出Vue之自动化路由
Aug 06 Javascript
nuxt静态部署打包相对路径操作
Nov 06 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改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
JQuery autocomplete 使用手册
2010/04/01 Javascript
javascript学习笔记(九) js对象 设计模式
2012/06/19 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
js修改地址栏URL参数解决url参数问题
2012/12/15 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
2016/07/09 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
2016/09/26 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
NodeJs模拟登陆正方教务
2017/04/28 NodeJs
vue实现全选、反选功能
2020/11/17 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
基于canvas实现手写签名(vue)
2020/05/21 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
python 实现判断ip连通性的方法总结
2018/04/22 Python
python实现趣味图片字符化
2019/04/30 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
python suds访问webservice服务实现
2020/06/26 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
什么是Smarty变量操作符?如何使用Smarty变量操作符
2014/07/18 面试题
餐厅考勤管理制度
2014/01/28 职场文书
残疾人创业典型事迹
2014/02/01 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
运动会运动员赞词
2015/07/22 职场文书
退伍军人感言
2015/08/01 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书