Ajax如何提交数据到springMVC后台

时间 2019-12-08

原文原文链接

如今好多web项目实现前段和后端分离，实现前端和后端技术人员，使他们加快开发，减小沟通上的问题，后台只须要提供访问接口，而前天只须要调用提供的接口便可。减小先后端的沟通上的成本javascript

本项目是开发中发现ajax提交数据产生问题时，写的一个总结。实现ajax的提交数据时的技术问题html

本项目目录树：前端

本项目就一个Controller，AjaxController.java的代码以下：java

package com.myshiro.controller;

import java.io.IOException;
import java.util.Date;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import java.util.Set;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

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 com.alibaba.fastjson.JSONObject;

@Controller
public class AjaxController {

    @RequestMapping(value="/ajaxString")
    public void a(String sa, String sb, HttpServletRequest request, HttpServletResponse response) 
            throws IOException{
        response.getWriter().println("sa: " + sa + ", sb: " + sb);
    }
    
    @RequestMapping(value="/ajaxInteger")
    public void b(Integer ia, Integer ib, HttpServletRequest request, HttpServletResponse response) 
            throws IOException{
        response.getWriter().println("ia: " + ia + ", ib: " + ib);
    }
    
    //@RequestBody JSONObject json 把ajax提交的josn参数绑定到JSONObject类型的josn中，能够用来接受List，Map，Date等格式
    //而后经过JSONObject的方法进行类型转换
    @RequestMapping(value="/ajaxList")
    public void d(@RequestBody JSONObject json, HttpServletRequest request, HttpServletResponse response) 
            throws IOException{
        String gid = json.getString("gid");
        String myList = json.getString("myList");
        //转换成List类型
        List<String> myList1 = json.getObject("myList", List.class);
        System.out.println(myList1.size());
        
        //转换成Map类型
        Map<String, String> myMap = json.getObject("myMap", Map.class);
        Set<String> myMapKeySet = myMap.keySet();
        for(Iterator<String> iter = myMapKeySet.iterator(); iter.hasNext(); ){
            String index = iter.next();
            System.out.println("key: " + index + " value: " + myMap.get(index));
        }
        
        System.out.println(myList);
//        response.getWriter().println("gid: " + gid + ", db: " + myList);
        response.getWriter().print(json);
    }
}

index.jsp前段页面jquery

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>    
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath %>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax测试</title>
</head>
<body>

<div>
    <button type="button" onclick="ajaxString()">ajaxString</button>
    <button type="button" onclick="ajaxInteger()">ajaxInteger</button>
    <button type="button" onclick="ajaxList()">ajaxList</button>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
function ajaxString(){
    $.ajax({
        type: 'post',
        url: 'ajaxString',
        data: {sa: 'ajaxString_a', sb: 'ajaxString_b'},
        success: function(res){
            alert(res);
        }
    });
}

function ajaxInteger(){
    $.ajax({
        type: 'post',
        url: 'ajaxInteger',
        data: {ia: 10010, ib: 10012},
        success: function(res){
            alert(res);
        }
    });
}

function ajaxList(){
    var myList = new Array();
    myList[0] = 'parameter_1';
    myList[1] = 'parameter_2';
    myList[2] = '参数3';
    var myMap = {
            'key1': 'value1',
            'key2': 'value2',
            'key3': 'value3'
    }
    $.ajax({
        type: 'post',
        url: 'ajaxList',
        dataType: 'json', //表示返回值的数据类型
        contentType: 'application/json;charset=UTF-8', //内容类型
        traditional: true, //使json格式的字符串不会被转码
        data: JSON.stringify({gid: 10001, myList:  myList, myMap: myMap}),
        success: function(res){
            alert(res.gid);
            alert(res.myList);
        }
    });
}
</script>
</body>
</html>

本项目实现了ajax提交简单数据，提交jquery数组，字典等数据类型时，springMVC如何接受这些参数web