浅谈Web页面向后台提交数据的方式和选择

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页面向后台提交数据的方式和选择的全部内容了，希望对大家有所帮助，多多支持我们~

赞 (0)

相关推荐

  • jquery ajax提交表单数据的两种方式

    之前实现AJAX使用Javascript脚本一个一个敲出来的,很繁琐.学习Jquery之后就感觉实现AJAX并不是那么的困难了,当然除了Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery.Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后台可以获取到Form表单的值).在所要提交的表单中,如果元素很多的话建议用第二种方式进行提交,当然你要是想练练"打字水平"的话用第一种方式提交也未尝不可,相信开发者都不想费白劲吧!

  • JS实现动态生成表格并提交表格数据向后端

    本文实例介绍了JS实现动态生成表格并向后端提交表格数据的相关代码,分享给大家供大家参考,具体内容如下 先来看一下需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 那么我们首先需要解决的是动态生成表格的问题 1.首先我们需要导入JS库文件. <script src="../js/jqui/jquery/jquery-1.5.2.min.js" type="text/javascript"></

  • 多种方式实现JS调用后台方法进行数据交互

    项目开发过程中很多地方都需要前端和后台的数据交互,几种典型常用的方法如利用控件的AutopostBack属性.Button提交表单等等.但这些都是有条件的,AutoPostBack具有实时性但会刷新页面,Button提交表单不能实现数据交互的实时性.当然说到前台与后台的数据交互更不能漏掉ajax,ajax实现前台与后台数据的异步交互,并且保证实时的.局部刷新.但有些数据不需要异步交互,例如当交互的数据是下一步执行的条件时,就必须要等到数据前台与后台数据交互完成后才能继续执行程序.所以对于掌握js

  • JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法

    多网站的需要填写的文本框在默认状态下都会给出一个默认的提示语言,当鼠标点击此文本框的时候能够将里面的默认文本清除,当删除输入的文本且焦点离开文本框的时候再将默认的文本写入文本框. 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/&quo

  • 浅谈Web页面向后台提交数据的方式和选择

    1.通过表单提交 这是HTML支持最传统的提交方法,需要创建表单,然后表单包含各种类型的表单元素,还要有一个提交按钮,通过提交按钮来提交到后台,这种方式提交后页面会刷新. 2.通过网页链接提交 可以在网页的链接附上需要提交的参数,当用户点击链接后,浏览器发起向链接的访问,从而也把链接附带的参数提交到后台,这种方式提交后页面也会刷新. 3.通过ajax提交 Javascript支持ajax方式创建HTTP请求,可以通过在HTML页面元素的事件处理函数中创建ajax请求,在url参数里携带所需提交的

  • 浅谈在页面中获取到ModelAndView绑定的值方法

    springMVC中通过ModelAndView进行后台与页面的数据交互,那么如何在页面中获取ModelAndView绑定的值呢? 1.在JSP中通过EL表达式进行获取(比较常用) 后台: ModelAndView model = new ModelAndView(); model.addObject("name","Jims"); JSP:在JSP中直接使用${name }进行获取 姓名:${name } 2.通过JSP内置对象进行获取 后台: ModelAndV

  • 浅谈web服务器项目中request请求和response的相关响应处理

    我们经常使用别人的服务器进行构建网站,现在我们就自己来写一个自己的服务来使用. 准备工作:下载所需的题材及文档 注:完整项目下载 一.request请求获取  1.了解request请求 在写服务器之前,我们需要知道客户端发送给我们哪些信息?以及要求我们返回哪些信息?经过测试我们能够知道用户客户端发送的信息有以下几点: 客户端发送到服务器端的请求消息,我们称之为请求(request),其实就是一个按照http协议的规则拼接而成的字符串,Request请求消息包含三部分: 请求行 消息报头 请求正

  • 浅谈Web Storage API的使用

    浅谈Web Storage API的使用

    目录 一.浏览器的本地存储技术 1.1.sessionStorage 1.2.localStorage 二.Web Storage相关接口 三.浏览器兼容性 四.隐身模式 五.使用Web Storage API 一.浏览器的本地存储技术 除了最早的使用cookie来进行本地存储之外,现代浏览器使用Web Storage API来方便的进行key/value的存储. Web Storage有两种存储方式: 1.1.sessionStorage 对于每一个访问源,都会维持一个独立的存储区域.只要浏览

  • 浅谈Hibernate中的三种数据状态(临时、持久、游离)

    1.临时态(瞬时态) 不存在于session中,也不存在于数据库中的数据,被称为临时态. 比如:刚刚使用new关键字创建出的对象. 2.持久态 存在于session中,事务还未提交,提交之后最终会进入数据库的数据,被称为持久态. 比如:刚刚使用session.save()操作的对象. 3.游离态(脱管态) 存在于数据库中,但不存在于session中的数据,被称为游离态. 比如:使用了session.save(),并且事务已经提交之后,对象进入数据库,就变成了游离态. 以上这篇浅谈Hibernat

  • 浅谈web上存漏洞及原理分析、防范方法（文件名检测漏洞）

    我们通过前篇:<浅谈web上存漏洞及原理分析.防范方法(安全文件上存方法)>,已经知道后端获取服务器变量,很多来自客户端传入的.跟普通的get,post没有什么不同.下面我们看看,常见出现漏洞代码.1.检测文件类型,并且用用户上存文件名保存 复制代码 代码如下: if(isset($_FILES['img'])){    $file = save_file($_FILES['img']); if($file===false) exit('上存失败!'); echo "上存成功!&qu

  • 浅谈web服务器项目中静态请求和动态请求处理

    注:完整项目下载 在处理了核心任务之后,我们会发现有些请求并不是都是静态的,那么我们就需要进行实现处理动态请求的要求,如下面代码是我们请求的解决方式,我们只需在HttpRequestImpl实现类中,将如下代码实现具体的判断过程 //判断当前请求的否是静态资源 public boolean isStaticResource(){ return true; } //判断当前请求的否是动态资源 public boolean isDynamicResource(){ return true; } 1.

  • 浅谈uniapp页面跳转的解决方案

    浅谈uniapp页面跳转的解决方案

    目录 1.uniapp常用跳转API 2.微信小程序页面跳转API 3.其他页面跳转回tabbar页面的方法 4.页面来回跳转保持数据的方法 正常的页面跳转的api大家应该都清楚,但是涉及到多页面来回跳转以及返回到导航页的时候就需要一些技巧来进行处理,之前找了挺多文章也没有很详细的介绍,本文就详细说说页面跳转的那些事. 1.uniapp常用跳转API API 作用 uni.navigateTo 保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面. uni.

  • 浅谈C#各种数组直接的数据复制/转换

    之前做Opengl程序,用的的C#的SharpGL这个库,里面有各种奇怪绑定的函数,比如原型为: void glInterleavedArrays(uint format, int stride, void * pointer); 的函数被他绑定成: private static extern void glInterleavedArrays(uint format, int stride, int[] pointer); 然后我就被逼着学习了各种float[] 转 int[] 的方法,比较他们

  • 浅谈web项目读取classpath路径下面的文件

    本文主要研究的是web项目下读取classpath路径下的文件的问题,具体如下. 首先分两大类按web容器分类 一种是普通的web项目,像用Tomcat容器,特点是压缩包随着容器的启动会解压缩成一个文件夹,项目访问的时候,实际是去访问文件夹,而不是jar或者war包. 这种的无论你是用获取路径的方法this.getClass().getResource("/")+fileName 获取流的方法this.getClass().getResourceAsStream(failName);

随机推荐