ajax方式和修改form属性action(提交路径)方式提交form表单

浏览器和服务器的数据交互方式主要有六种:

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"%>

<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="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">
                        
                        
                        <input type="hidden" name="itemList[${status.index }].id" value ="${item.id}" >
                    <tr>
                        
                        <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="${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 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";
    }
}

你可能感兴趣的:(web)