通过ajax传数据到后台，前端传json数据到后台，传FormData表单数据到后台

比眉伴天荒 2022-12-23 06:13 187阅读 0赞

**ajax的contentType ：  
1、ajax默认的contentType 为：contentType : “application/x-www-form-urlencoded”，使用场景是发送字符串。  
2、contentType : ‘application/json;charset=UTF-8’,使用场景是后台不是接收单个字符串，而是一个实体类时就用它；或者是发送json数据。**

## 一、前端传json数据到后台 ##

**js代码：**

**后台控制类java代码：**

import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    import net.sf.json.JSONArray;
    import net.sf.json.JSONObject;
    import java.util.List;
    import java.util.Map;
    import java.util.ArrayList;
    import java.util.HashMap;
    import org.springframework.stereotype.Controller;
    import javax.servlet.http.HttpServletRequest;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    @Controller
    @RequestMapping(value = BeforeTextController.BASE_URL)
    public class BeforeTextController{ 
    	private static Logger logger = LoggerFactory.getLogger(BeforeTextController.class);
    
    	public static final String BASE_URL = "/before/text";
    
    	@RequestMapping(value = "/getList", method = RequestMethod.POST)
    	@ResponseBody
    	public String getList(HttpServletRequest request, @RequestBody JSONObject listJsonData) { 
    		JSONArray listText= listJsonData.getJSONArray("listText");
    		Map<String, Object> map = new HashMap<>();
    		List list = new ArrayList<>();
    		for (int i = 0; i < listText.size(); i++) { 
    			String listValue= (String) listText.get(i);
    		}
    		return null;
    	}
    }

## 二、传FormData表单数据到后台 ##

**js代码：**

var formData = new FormData();
    	formData.append("textValue1", "textValue1");//key value
    	formData.append("textValue2", "textValue2");
    	formData.append("textValue2", "textValue3");
    	$.ajax({ 
    		type : 'POST',
    		url : '../../before/text/getTypeList',// 发送请求到后台
    		async : false,
    		data : formData,
    		processData : false,
    		contentType : false,
    		success : function(res) { 
    			//TODO 渲染数据到页面
    		}
    	});

**后台控制类java代码：**

@RequestMapping(value = "/getTypeList", method = RequestMethod.POST)
    @ResponseBody
    public ResponseDTO getTypeList(HttpServletRequest request) { 
    	String textValue1= request.getParameter("textValue1");
    	String textValue2= request.getParameter("textValue2");
    	String textValue3= request.getParameter("textValue3");
    	//TODO 业务需求
    	return null;
    }

## 三、传字符串数据到后台 ##

**js代码：**

var textInfo= $("#divId").text();
    $.ajax({ 
    	url : '../../before/text/getInfo',
    	contentType : "application/x-www-form-urlencoded",// 关键是加上这一行，指定类型
    	data : { 
    		"textInfo" : textInfo
    	},
    	type : 'POST',
    	async : false,
    	success : function(res) { 
    		//TODO 渲染数据到页面
    	}
    });

**后台控制类java代码：**

@RequestMapping(value = "/getInfo", method = RequestMethod.POST)
    	@ResponseBody
    	public String getInfo(HttpServletRequest request) { 
    		String textInfo= request.getParameter("textInfo");
    		//业务需求 TODO
    		return null;
    	}