浅谈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实现的使用方向键控制光标在table单元格中切换
Nov 17 Javascript
jquery实现二级导航下拉菜单效果
Dec 18 Javascript
浅谈window.onbeforeunload() 事件调用ajax
Jun 29 Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 Javascript
vue使用v-for实现hover点击效果
Sep 29 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
Nov 12 Javascript
vue ajax 拦截原理与实现方法示例
Nov 29 Javascript
小程序中手机号识别的示例
Dec 14 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
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 生成随机验证码图片代码
2010/02/08 PHP
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
typecho插件编写教程(二):写一个新插件
2015/05/28 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
jQuery 全选效果实现代码
2009/03/23 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
简单谈谈json跨域
2016/03/13 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
基于JS实现移动端左滑删除功能
2017/07/28 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
turn.js异步加载实现翻书效果
2019/07/25 Javascript
Python实现感知机(PLA)算法
2017/12/20 Python
python虚拟环境迁移方法
2019/01/03 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
优秀演讲稿范文
2013/12/29 职场文书
优秀管理者事迹材料
2014/05/22 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
python基础之文件操作
2021/10/24 Python