浅谈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基本语法分析说明
Jun 15 Javascript
javascript实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
jQuery获取注册信息并提示实现代码
Apr 21 Javascript
Javascript基础教程之关键字和保留字汇总
Jan 18 Javascript
jQuery选择器用法实例详解
Dec 17 Javascript
基于Vue.js实现数字拼图游戏
Aug 02 Javascript
JavaScript定时器实现的原理分析
Dec 06 Javascript
详解jQuery的表单验证插件--Validation
Dec 21 Javascript
总结几道关于Node.js的面试问题
Jan 11 Javascript
深入浅析js原型链和vue构造函数
Oct 25 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
Vuex中实现数据状态查询与更改
Nov 08 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将数据导入到Foxmail
2006/10/09 PHP
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
php输出形式实例整理
2020/05/05 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
javascript事件问题
2009/09/05 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
js实现的牛顿摆效果
2015/03/31 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
JS实现复制内容到剪贴板功能
2017/02/05 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
jQuery实现轮播图效果
2019/11/26 jQuery
实现vuex原理的示例
2020/10/21 Javascript
Vue中computed和watch有哪些区别
2020/12/19 Vue.js
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
[03:11]2014DOTA2国际邀请赛-VG掉入败者组 独家专访357
2014/07/19 DOTA
python解析xml文件实例分享
2013/12/04 Python
在Python中处理XML的教程
2015/04/29 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
详解python logging日志传输
2020/07/01 Python
python绘制趋势图的示例
2020/09/17 Python
阿联酋电子产品购物网站:Menakart
2017/09/15 全球购物
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
英国绿色商店:Natural Collection
2019/05/03 全球购物
工商治理实习生的自我评价
2014/01/15 职场文书
《在山的那边》教学反思
2014/02/23 职场文书
毕业设计致谢词
2015/05/14 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
java基础——多线程
2021/07/03 Java/Android