1.表單提交;2.超連結;3.js/jquery方式 3.1 地址欄的替換 location.href="地址欄";(本文有) 3.2 js提交表單___利用form的action屬性(本文有) 3.3 ajax(本文有)前端頁面代碼如下:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <base href="<%=basePath%>"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>查詢商品列表</title> <script type="text/javascript" src="resource/js/jquery-1.4.4.min.js"></script> <script type="text/javascript"> $(function(){ //全選全不選 $("#selectAll").click(function(){ //注意this指的是$("#selectAll")所對應的dom對象,所以可以直接用this.屬性 $("[name=ids]").attr("checked",this.checked); }) //地址欄替換向後台提交資料 $("#updateAll").click(function(){ if($("input:checked").length==0){ alert("請先選擇要刪除的資料"); return; } var ids=""; $("input:checked").each(function(){ ids = ids+this.value+","; }) ids=ids.substring(0,ids.length-1); alert(ids); location.href = "formSubmit/playPlay?ids="+ids; }) //修改form表單的action屬性(路徑)提交整個form表單 $("#deleteAll").click(function(){ if($("input:checked").length==0){ alert("請先選擇要刪除的資料"); return; } //修改提交表單的路徑,並將表單提交 $("#myform").attr("action","formSubmit/deleteItems").submit(); }) //ajax測試-----ajax方式提交整個表單 $("#ajaxTest").click(function(){ var url = "formSubmit/ajax"; //.serializer()將form表單中所有有name屬性的input標籤裡的value值按照a=1&b=2&c=3&d=4&e=5的方式提交 var params = $("#myform").serialize(); alert(params); $.post(url,params,function(data){ alert(data); },"text") }) }) //頁面載入成功事件 //ajax向後台直接提交資料------springMVC用@RequestBody標籤接收 // @ResponseBody標籤返回json資料 function jsonTest() { /* alert(111); */ $.ajax({ type:"post", url:"formSubmit/editItemSubmit_RequestJson", contentType:"application/json;charset=utf-8", data:'{"name":"測試商品","price":99.9}', success:function(data){ //alert(JSON.stringify(data)); var jsonStr=JSON.stringify(data); //JSON.stringify(data);對象解析成json資料 alert(JSON.parse(jsonStr)['id']); //JSON.parse(jsonStr);json資料解析成對象 alert(JSON.parse(jsonStr).id); //和上面的結果一樣 } }); }//jsonTest() </script> </head> <body> <form action="" method="post" id="myform"> 查詢條件： <table width="100%" border=1> <tr> <td> 商品名稱:<input name="items.name" > <!-- <input type="submit" value="查詢"/> --> <input type="button" value="大量刪除" id="deleteAll" > <input type="button" value="批量修改" id="updateAll" > <input type="button" value="ajax測試" id="ajaxTest"> <input type="button" value="json測試" id="ajaxTest" onclick="jsonTest()"> </td> </tr> </table> 商品列表： <table width="100%" border=1> <tr> <td><input type="checkbox" id="selectAll"></td> <td>商品名稱</td> <td>商品價格</td> <td>生產日期</td> <td>商品描述</td> <td>操作</td> </tr> <c:forEach items="${itemList}" var="item" varStatus="status"> <!-- 注意這裡只有通過el運算式才能獲得其下標++++++${status.index } --> <!-- 向QueryVo中的itemList傳值 --> <input type="hidden" name="itemList[${status.index }].id" value ="${item.id}" > <tr> <!-- 注意,只有被選中的(checked才會被提交) --> <td><input type="checkbox" name="ids" value="${item.id}"></td> <td><input type="text" name="itemList[${status.index }].name" value="${item.name }"></td> <td><input type="text" name="itemList[${status.index }].price" value="${item.price }"></td> <td><input type="text" name="itemList[${status.index }].createtime" value="<fmt:formatDate value="${item.createtime}" pattern="yyyy-MM-dd HH:mm:ss"/>"></td> <td><input type="text" name="itemList[${status.index }].detail" value="${item.detail }"></td> <td><a href="item/itemEdit/${item.id}">修改</a></td> </tr> </c:forEach> </table> </form> </body></html>
後端代碼
package cn.nrsc.ssm.action;import java.util.List;import javax.annotation.Resource;import javax.servlet.http.HttpServletRequest;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestBody;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import cn.nrsc.ssm.pojo.Items;import cn.nrsc.ssm.pojo.QueryVo;import cn.nrsc.ssm.service.ItemsService;@Controller@RequestMapping("/formSubmit")public class FormSubmitTest { @Resource private ItemsService itemsService; @RequestMapping("list") public String list(HttpServletRequest request){ List<Items> list = itemsService.findAllItems(); request.setAttribute("itemList", list); return "formTest"; } //ajax測試 @RequestMapping("ajax") public String demo1_ajax(QueryVo queryVo,Integer[] ids) { //ids為checkbox的value值,選中即可以提交到後台 System.out.println(111); //隨便輸出點東西,方便打斷點 return "redirect:list"; } //通過修改form表單的action屬性(地址欄地址)向後台提交資料測試 @RequestMapping("deleteItems") public String deleteItems(QueryVo queryVo, Integer[] ids){ //ids為checkbox的value值,選中即可以提交到後台 System.out.println(111); //隨便輸出點東西,方便打斷點 return "redirect:list"; } //接收頁面資料'{"name":"測試商品","price":99.9}'封裝到對象,並返回json資料 @RequestMapping("editItemSubmit_RequestJson") public @ResponseBody Items editItemSubmit_RequestJson(@RequestBody Items items) { items.setId(111); return items; } //接收location.href方式傳來的資料 @RequestMapping("/playPlay") public String playPlay(String ids){ System.out.println(ids);//隨便輸出點東西,方便打斷點 return "redirect:list"; }}Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
