浅谈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 相关文章推荐
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 Javascript
Javascript正则控制文本框只能输入整数或浮点数
Sep 02 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
jQuery插件pagewalkthrough实现引导页效果
Jul 05 Javascript
JavaScript构造函数详解
Dec 27 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
深入理解vue-class-component源码阅读
Feb 18 Javascript
vue-cli3配置与跨域处理方法
Aug 17 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的可变变量名的使用方法分享
2012/02/05 PHP
PHP向socket服务器收发数据的方法
2015/01/24 PHP
php制作动态随机验证码
2015/02/12 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
jQuery复合事件用法示例
2017/06/10 jQuery
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
微信小程序实现图片上传、删除和预览功能的方法
2017/12/18 Javascript
vue filters的使用详解
2018/06/11 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
vue 动态创建组件的两种方法
2020/12/31 Vue.js
Python中的连接符(+、+=)示例详解
2017/01/13 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
python判断完全平方数的方法
2018/11/13 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
如何利用python读取micaps文件详解
2020/10/18 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
美国现代家具网站:Design Within Reach
2018/07/19 全球购物
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
自考毕业自我鉴定范文
2013/10/27 职场文书
岗位职责风险防控
2014/02/18 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
学校三八妇女节活动总结
2015/02/06 职场文书
十个Python自动化常用操作,即拿即用
2021/05/10 Python
JavaScript实现简单计时器
2021/06/22 Javascript
详解JavaScript中Arguments对象用途
2021/08/30 Javascript
Pandas搭配lambda组合使用详解
2022/01/22 Python