浅谈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 相关文章推荐
js replace 与replaceall实例用法详解
Aug 03 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
一行命令搞定node.js 版本升级
Jul 20 Javascript
jquery中添加属性和删除属性
Jun 03 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
Feb 20 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
vue2中filter()的实现代码
Jul 09 Javascript
简单谈谈js的数据类型
Sep 25 Javascript
JavaScript反射与依赖注入实例详解
May 29 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
element的el-table中记录滚动条位置的示例代码
Nov 06 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
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
实现php加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
zend framework文件上传功能实例代码
2013/12/25 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
PHP解析目录路径的3个函数总结
2014/11/18 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
在表单提交前进行验证的几种方式整理
2013/07/31 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
2016/10/10 Javascript
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
使用Python的PEAK来适配协议的教程
2015/04/14 Python
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
Python3实现的爬虫爬取数据并存入mysql数据库操作示例
2018/06/06 Python
Python绘制的二项分布概率图示例
2018/08/22 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
python微信公众号开发简单流程实现
2020/03/09 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
打架检讨书300字
2014/02/02 职场文书
六一亲子活动感想
2015/08/07 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书