常见的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、持续更新中。。。