vue中使用axios时Form Data和Request Payload，以及From Data中数据是一行字符串问题？

绝地灬酷狼 2022-01-31 18:59 268阅读 0赞

Request Payload 格式数据，axios默认的Content-type是application/json;charset=UTF-8，后端用`request.getParameter()`根本接收不到  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70]  
设置请求格式为表单`{headers: {'content-type': 'application/x-www-form-urlencoded'}}`

sendAjax: function() { 
    
    				var data = { };
    				data.no = "001";
    				data.name = "李四";
    				data.comment = "admin";
    				var that = this;
    
    
    				axios.post("CommentServlet",data, { headers: { 'content-type': 'application/x-www-form-urlencoded'}}).then(function(result) { 
    					console.log(result);
    				});
    				console.log(data);
    			}

修改完之后就成了表单格式了，但还有问题，这个表单将json格式整体作为了字符串，相当于整体是一个键，而没有值，所以后台接收不到，是null。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 1]  
解决方法：

*  1.导包，axios内置的不用下载。

import qs from 'qs';

*  2.`qs.stringify()`

sendAjax: function() { 
    
    				var data = { };
    				data.no = "001";
    				data.name = "李四";
    				data.comment = "admin";
    				var that = this;
    
    
    				axios.post("CommentServlet", qs.stringify(data, { headers: { 'content-type': 'application/x-www-form-urlencoded'}
    				})).then(function(result) { 
    					console.log(result);
    				});
    				console.log(data);
    			}

结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 2]  
后端可以接收数据

String comment = request.getParameter("comment");
    String name = request.getParameter("name");
    String no = request.getParameter("no");

--------------------

谢谢！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70]: /images/20220131/f014c28fdef04db4a8d9e7dfb1e7df92.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 1]: /images/20220131/b2fed1d026c04b2c8ecddd2fc4edfa53.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 2]: /images/20220131/c3f2b4ec537e4acaac277cf9f4bd64d5.png