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>