常见的Form表单提交方式

Form表单提交方式探究

在进行项目编程的时候,我们难免会去编写一些简单的前端页面. 而编写前端页面就力不开 form表单的支持. 下面就form表单的提交方式进行如下探寻

1、常规写法
在form表单中添加一个 input标签，类型为submit

<h1>商品列表</h1><hr><form action="/goods/selGoods" method="post">商品类型:<select name="typeid"><option value="1" selected="selected">家电产品</option><option value="2">笔记本电脑</option><option value="3">手机</option><option value="4">其他</option></select>商品名称: <input type="text" name="name" value="${ sessionScope.name}"><input type="submit" value="查询"></form>

2、使用js 的进行dom操作进行提交
新建一个button ，增加id属性，当点击这个button时，触发表单提交操作
前端代码:

 <div align="center" ><h1>商品列表</h1><hr><form action="/goods/selGoods" method="post">商品类型:<select name="typeid"><option value="1" selected="selected">家电产品</option><option value="2">笔记本电脑</option><option value="3">手机</option><option value="4">其他</option></select>商品名称: <input type="text" name="name" value="${ sessionScope.name}"><button id="btn">查询</button></form>

js代码

 $("#btn").click(function(){document.forms[0].submit();})

震惊!!!
现在表单太智能化了,只需要在表单中添加一个button 按钮, 点击他就会自动帮你提交表单 ! 亲测有效! QQ浏览器\谷歌浏览器都可以.

<form action="goods/addGoods" method="post" enctype="multipart/form-data">商品名称: <input type="text" name="name" ><br>类型: <select name="typeid"  >   <option value="1" selected="selected">家电产品</option>   <option value="2">笔记本电脑</option> <option value="3">手机</option>  <option value="4">其他 </option></select><br>    品牌: <input type="text" name="brand"><br>型号: <input type="text" name="model"><br>单价: <input type="text" name="price"><br>图片: <input type="file" name="file"><br>描述: <input type="text" name="description"><br><!-- <input type="submit" value="提交"> --><button>ok</button></form>

3、利用ajax
还是利用button ,在点击相关按钮是, 将相关的信息(一条甚至是多条,json格式) 通过ajax的方式发送到servlet 或者spring容器 ,然后还可以获得从前端那里或得到的数据
例如本例,就是将商品id信息发送到前端
js代码

 <script type="text/javascript" src="/js/jquery.js"></script><script type="text/javascript">function btn(goodsid){alert(goodsid)$.get("goods/getDetail", {"id":goodsid}, function(data) {$("#detail"+goodsid).append(data.description);$("#picture"+goodsid).append('<img  src="/images/'+data.picture+'">');})}}) </script>

前端代码

<c:forEach items="${goodList}" var="goods"><tr><td> ${goods.name } </td><td> ${goods.goodsType.typename } </td><td> ${goods.brand } </td><td> ${goods.model } </td><td> ${goods.price } </td><%-- <td> ${goods.picture } </td> --%><%-- <td> <img alt="" src="data:images/${goods.picture }"> </td> --%><%-- <td> ${goods.description } </td> --%><td id="picture${goods.goodsid }">  </td><td id="detail${goods.goodsid }" > </td><td> <a href="javascript:btn(${goods.goodsid})" ><button>详情</button> </a> </td></tr></c:forEach>

4、持续更新中。。。

常见的Form表单提交方式相关推荐

传统form表单提交方式的文件上传与文件存储
引言时隔一天,上一篇文章<文件存储>刚一停笔,今天上午就解决了困扰我已久的文件上传问题. 站在一个已实现功能的角度来重新看待这个文件上传的业务:编辑页面选择jar包,然后通过form表单 ...
php form表单提交方式,form表单提交数据的几种方式
一.submit提交一般表单提交通过type=submit实现,input type="submit",浏览器显示为button按钮,通过点击这个按钮提交表单数据跳转到/url. ...
java 提交表单_http常见的form表单请求方式
在Web开发中,我们使用的比较多的HTTP请求方式基本上就是GET.POST. 一.http请求常见的表单文件上传形式首先了解下application/x-www-form-urlencoded和m ...
http常见的form表单请求方式
2019独角兽企业重金招聘Python工程师标准>>> 在Web开发中,我们使用的比较多的HTTP请求方式基本上就是GET.POST. 一.http请求常见的表单文件上传形式 ...
JSP form表单提交方式get 和post的区别
get: 提交的数据量要小于1024字节,表单提交时表单域数值(表单请求的信息:账号.密码等)会在地址栏显示. 如图 post: 传递的数据量不受限制,表单提交时表单的域值(表单 ...
前端基础至 form表单提交方式
原文:https://www.jianshu.com/p/8c947e7fee00 虽然前后端不分离项目越来越少了(vue等太香)但是有时候后端程序员想自己搞不分离web页面的时候还是会用原生htm ...
用form表单提交方式上传图片到服务器
springMVC为文件上传提供了直接的支持,这种支持是通过MultipartResolver实现的,实现类为CommonsMultipartResovler. 依赖:commons-fileuplo ...
form 关于form表单提交方式get和post的区别？
1.get是从服务器上获取数据,post是向服务器传送数据. 2.get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到.post是通过HT ...
原生Form表单提交方式
var idcard = result.data.data; var url = " 请求的地址";var postForm = document.createElement(&q ...

常见的Form表单提交方式

Form表单提交方式探究

常见的Form表单提交方式相关推荐

最新文章

热门文章