ajax方式和修改form屬性action(提交路徑)方式提交form表單

來源:互聯網
上載者:User
瀏覽器和伺服器的資料互動方式主要有六種:
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";    }}
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.