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

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

一、前端传json数据到后台

js代码:

var listText = [];
listText.push("value1");
listText.push("value2");
listText.push("value3");
$.ajax({
	type : 'POST',
	url : '../../before/text/getList',// TODO 发送请求到后台
	// headers:{'Content-Type':'application/json;charset=UTF-8'},
	contentType : 'application/json;charset=UTF-8',
	dataType : 'json',
	async : false,
	data : JSON.stringify({
		"listText" : listText
	}),
	success : function(res) {
		if (res.code == 200) {
			// TODO 渲染数据到页面
		}
	}
});

后台控制类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;
	}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值