前端Ajax与Axios向SpringMVC提交JSON数据实战教程

本资源提供了一个关于前端使用ajax或axios向后端Spring MVC提交数据的实例，涵盖了两种不同的数据格式——JSON格式字符串和JSON对象。示例旨在帮助初学者理解这两种常见方法。 在Web开发中，前端与后端的数据交互是必不可少的。本示例介绍的是一种常见的数据提交方式，即通过JavaScript的异步请求库，如jQuery的ajax和axios，将数据发送到服务器。以下是详细的解析： ### JSON格式字符串提交 #### 前端（jQuery） 当前端页面的数据是以JSON格式字符串的形式存在时，可以使用jQuery的`$.ajax`方法进行提交。首先，创建一个JSON格式的字符串，例如： ```javascript var bjFormData = '{'; bjFormData += '"pmx":"' + pmx + '",'; bjFormData += '"vmd":"' + vmd + '"'; bjFormData += '}'; ``` 然后，使用`$.ajax`设置请求参数： - `type`：指定请求类型，这里是"post"。 - `url`：指定请求的URL，例如"bakevideojson"。 - `contentType`：指定数据的Content-Type，这里应设为"application/json"。 - `dataType`：表示期望的返回数据类型，可选，但在此例子中设为"json"。 - `data`：发送的数据，需使用`JSON.stringify()`将其转换为JSON字符串。 - `success`：请求成功后的回调函数。 示例代码： ```javascript $.ajax({ type: "post", url: "bakevideojson", contentType: "application/json", dataType: "json", data: JSON.stringify(bjFormData), success: function (data) { // 处理返回数据 } }); ``` #### 后端（Spring MVC） 在后端，可以使用`@RequestBody`注解来接收前端发送的JSON字符串。`JSONObject`是用于解析JSON的Java库。例如： ```java import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RestController; import org.json.JSONObject; @RestController public class MyController { @PostMapping("bakevideojson") public ResponseStatus testJsonFormSubmit(ModelMap model, @RequestBody JSONObject jsonObj) { String pmx = jsonObj.optString("pmx", null); String vmd = jsonObj.optString("vmd", null); // 其他业务逻辑... } } ``` ### JSON对象提交 #### 前端（jQuery & Axios） 当数据是以JSON对象的形式存在时，提交方式基本类似，但无需手动构建JSON字符串。对于jQuery，仍使用`$.ajax`，只是数据部分直接传入JSON对象： ```javascript let dataObj = { pmx: obj1, vmd: obj2, width: obj3 }; $.ajax({ type: "post", url: "testjsonfrom", contentType: "application/json", dataType: "json", data: JSON.stringify(dataObj), success: function (data) { console.log(data); } }); ``` 对于axios，使用更加简洁，直接将JSON对象作为`data`参数即可，无需`processData`和`contentType`设置，因为axios会自动处理： ```javascript axios({ url: 'testjsonfrom', method: 'post', data: dataObj, crossDomain: true }).then(response => { console.log(response.data); }).catch(error => { console.error(error); }); ``` #### 后端（Spring MVC） 后端接收JSON对象的方法与前一种情况相同，只需确保JSON对象的键与后端接口中字段名匹配即可。 在实际开发中，根据项目需求，可以选择适合的库和数据格式。同时，确保前后端的Content-Type匹配，以正确解析和处理数据。在处理JSON数据时，要特别注意异常处理，防止因数据格式错误导致的程序异常。