浅谈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 相关文章推荐
图片完美缩放
Sep 07 Javascript
csdn 论坛技术区平均给分功能
Nov 07 Javascript
js的逻辑运算符 ||
May 31 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 Javascript
jquery实现数字输入框
Feb 22 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
如何在js代码中消灭for循环实例详解
Jul 29 Javascript
vue项目动态设置页面title及是否缓存页面的问题
Nov 08 Javascript
JavaScript设计模式之命令模式实例分析
Jan 16 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
Dec 09 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中通过Ajax如何实现异步文件上传的代码实例
2011/05/07 PHP
php数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
php中explode与split的区别介绍
2012/10/03 PHP
解析mysql left( right ) join使用on与where筛选的差异
2013/06/18 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
js实现的常用的左侧导航效果
2013/10/17 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
JS动态计算移动端rem的解决方案
2016/10/14 Javascript
微信开发 消息推送实现代码
2016/10/21 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
2016/11/21 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
解决vue-router进行build无法正常显示路由页面的问题
2018/03/06 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
vue实例中data使用return包裹的方法
2018/08/27 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
python复制与引用用法分析
2015/04/08 Python
python数组过滤实现方法
2015/07/27 Python
python编程开发之日期操作实例分析
2015/11/13 Python
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
Python排序搜索基本算法之归并排序实例分析
2017/12/08 Python
python正则表达式匹配IP代码实例
2019/12/28 Python
Python通过socketserver处理多个链接
2020/03/18 Python
文化宣传方案
2014/03/13 职场文书
2014最新离职证明范本
2014/09/12 职场文书
公司授权委托书样本
2014/09/15 职场文书
停课通知书
2015/04/24 职场文书
2016应届毕业生自荐信范文
2016/01/28 职场文书