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

最新推荐文章于 2022-04-26 13:13:42 发布

原创最新推荐文章于 2022-04-26 13:13:42 发布 · 1w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #表单

web 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了浏览器与服务器之间的六种主要数据交互方式，包括表单提交、超链接、JavaScript操作等，并提供了具体的前端代码示例及后端处理逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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";
    }
}