浅谈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 相关文章推荐
javascript fullscreen全屏实现代码
Apr 09 Javascript
javascript 必知必会之closure
Sep 21 Javascript
jQuery 表单验证扩展(四)
Oct 20 Javascript
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
Bootstrap CSS布局之表格
Dec 17 Javascript
vue2.0 datepicker使用方法
Feb 04 Javascript
JS伪继承prototype实现方法示例
Jun 20 Javascript
vuejs点击class变化的实例
Sep 05 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 Javascript
js+canvas实现简单扫雷小游戏
Jan 22 Javascript
three.js如何实现3D动态文字效果
Mar 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
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
文本框的字数限制功能jquery插件
2009/11/24 Javascript
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
jQuery实现商品活动倒计时
2015/10/16 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
[02:31]2014DOTA2国际邀请赛2009专访:干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
python统计一个文本中重复行数的方法
2014/11/19 Python
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
Python的Django框架可适配的各种数据库介绍
2015/07/15 Python
python使用turtle库绘制时钟
2020/03/25 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
django-allauth入门学习和使用详解
2019/07/03 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
QML实现钟表效果
2020/06/02 Python
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
电子信息工程专业求职信
2014/06/28 职场文书
幼师辞职信范文
2015/02/27 职场文书
大学生团日活动总结
2015/05/06 职场文书
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android
Python3的进程和线程你了解吗
2022/03/16 Python
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server