浅谈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 相关文章推荐
return false;和e.preventDefault();的区别
Jul 11 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
Jul 28 Javascript
js数组常见操作及数组与字符串相互转化实例详解
Nov 10 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 Javascript
JS实现列表页面隔行变色效果
Mar 25 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
微信小程序收藏功能的实现代码
Jun 12 Javascript
vue 设置路由的登录权限的方法
Jul 03 Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 Javascript
Layui选项卡制作历史浏览记录的方法
Sep 28 Javascript
axios封装与传参示例详解
Oct 18 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 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
如何对PHP程序中的常见漏洞进行攻击
2006/10/09 PHP
发布一个迷你php+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
php中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
基于PHP制作验证码
2016/10/12 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
PHP 实现缩略图
2021/03/09 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
json 实例详细说明教程
2009/10/31 Javascript
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
jquery 淡入淡出效果的简单实现
2014/02/07 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
javascript与PHP动态往类中添加方法对比
2018/03/21 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
Vue v-model组件封装(类似弹窗组件)
2020/01/08 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
Python可变参数函数用法实例
2015/07/07 Python
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
python 表达式和语句及for、while循环练习实例
2017/07/07 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
python 初始化一个定长的数组实例
2019/12/02 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
薪酬专员岗位职责
2014/02/18 职场文书
班级活动总结格式
2014/08/30 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS