常见的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="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、持续更新中。。。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-08-11 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读