react框架ajax请求后台controller接收不到

沐雨橙风ιε

已于 2023-07-02 23:47:58 修改

阅读量588

点赞数

文章标签： react.js ajax 前端

于 2022-09-04 00:11:06 首次发布

本文链接：https://blog.csdn.net/heyl163_/article/details/126684453

版权

最近在学习react前端框架，在前后端交互时遇到一个问题，详情如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>react实例</title>
		<script src="../js/react.development.js"></script>
		<script src="../js/react-dom.development.js"></script>
		<script src="../js/prop-types.js"></script>
		<script src="../js/babel.min.js"></script>
		<script src="../js/jquery.min.js"></script>
	</head>
	
	<body>
		<div id="example"></div>

		<script type="text/babel">
			class FormItem extends React.Component {
				constructor(props) {
					super(props);
				}
				
				render() {
					const itemLabel = this.props.itemLabel;
					const itemName = this.props.itemName;
					const change = this.props.change;
					
					return (
						<tr>
							<td>{itemLabel}</td>
							<td><input name={itemName} onChange = {change} /></td>
						</tr>
					);
				}
			}
			
			class UserForm extends React.Component {
				constructor(props) {
					super(props);
					
					this.changeEvent = this.changeEvent.bind(this);
					this.submitEvent = this.submitEvent.bind(this);
					this.state = {
						name: ''
					};
				}
				
				changeEvent(event) {
					const target = event.target;
					const name = target.name;
					const value = target.value;
					
					this.setState({
						[name]: value,
					});
				}
				
				submitEvent(event) {
					const formData = JSON.stringify(this.state);
					
					console.log(formData);
					
					$.post("http://localhost:8080/user/save", {formData}, function(response) {
						if(response.code === 200) {
							alert("请求成功");
						}
					}, 'json');
					
					event.preventDefault();
				}
				
				render() {
					return (
						<form onSubmit={this.submitEvent}>
							<table>
								<tbody>
									<FormItem itemLabel = '姓名' itemName = 'name' change={this.changeEvent} />
									<FormItem itemLabel = '手机号' itemName = 'phone' change={this.changeEvent} />
									<FormItem itemLabel = '邮箱' itemName = 'email' change={this.changeEvent} />
									
									<tr>
										<td><input type = "submit" /></td>
										<td><input type = "reset" /></td>
									</tr>
								</tbody>
							</table>
						</form>
					);
				}
			}
			
			ReactDOM.render(
				<UserForm />,
				document.getElementById('example')
			);
		</script>
	</body>
</html>

@CrossOrigin
@RestController
@RequestMapping(path = "/user")
public class UserController {
    /**
     * 添加用户
     * @return JsonResult<Void>
     */
    @RequestMapping(value = "/save", method = RequestMethod.POST)
    public JsonResult<Void> save(UserDTO userDTO) {
        System.out.println("得到的前端数据：" + userDTO);

        return JsonResult.success();
    }

}

请求能够到达后端controller，但是接收到的数据都是null

尝试了很多次，排除各种可能之后，终于找到了原因

原因很简单，如上图，不需要转格式，直接传

最后的代码为：

submitEvent(event) {
    const formData = this.state;
					
    console.log(formData);
					
    $.post("http://localhost:8080/user/save", formData, function(response) {
        if(response.code === 200) {
            alert("请求成功");
        }
    }, 'json');
					
    event.preventDefault();
}

导致这次问题的原因是：不熟悉什么时候变量名要用{}，没有及时通过浏览器查看请求数据的格式，浪费了不少时间。