AJAX设置content-type为:application/json提交参数后台接收参数的问题

10 篇文章 0 订阅
1 篇文章 0 订阅

我一直做java的,对前端说不上有多了解,以前遇到的前端的开发人员,包括我自己再写ajax的时候基本上都是以下写法:

$('#send').click(function(){
         $.ajax({
			 headers:{
				Authorization : "Bearer eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJVa1p1dEsxQm1PX2p3V09WVDJlbk16Z2piaHljZm1Ld0RiRkV1Q1RhdjY0In0.eyJqdGkiOiI1YzA2ZTk3NS1hNDRjLTRhMzctYmMyNy1hNDlhYzlhODc2MDMiLCJleHAiOjE1NDE1OTExNzMsIm5iZiI6MCwiaWF0IjoxNTQxNTkwMjczLCJpc3MiOiJodHRwczovL2Rldi54dWViYXN0dWR5LmNvbS9hdXRoL3JlYWxtcy9zYXRvIiwiYXVkIjoic2FsZXMtY2xpZW50Iiwic3ViIjoiN2Q0ODIxMDgtM2UzNi00OThmLWEyODAtYjE0YjhmMGJlN2ZkIiwidHlwIjoiQmVhcmVyIiwiYXpwIjoic2FsZXMtY2xpZW50Iiwibm9uY2UiOiJlYzFhNGIxMy04ZWZhLTQ1MTQtODkyZC1mNmU0ODkyZmNmNmYiLCJhdXRoX3RpbWUiOjE1NDE1OTAyNTMsInNlc3Npb25fc3RhdGUiOiIwMDEyNmUzYS1jODcxLTRjZWYtYTg4Ni1hZDY0YTc1YWMyY2MiLCJhY3IiOiIwIiwiY2xpZW50X3Nlc3Npb24iOiI0YTA2NTY0YS04Yzg4LTRkYjgtOTNlOS04OWI4MTBiY2FjODIiLCJhbGxvd2VkLW9yaWdpbnMiOlsiaHR0cDovL2xvY2FsaG9zdDo4MDgwIiwiaHR0cDovLzE5Mi4xNjguMC4yIl0sInJlYWxtX2FjY2VzcyI6eyJyb2xlcyI6WyJTYWxlcyIsIlRlYWNoZXJzIiwiU2FsZUFkbWluIiwiVGVhY2hlckFkbWluIiwidW1hX2F1dGhvcml6YXRpb24iXX0sInJlc291cmNlX2FjY2VzcyI6eyJzYXRvLW5vdGlmaWNhdGlvbiI6eyJyb2xlcyI6WyJUZWFjaGVycyIsIlNhbGVzIiwiU2FsZUFkbWluIiwiVGVhY2hlckFkbWluIl19LCJzYWxlcy1jcm0iOnsicm9sZXMiOlsiU2FsZXMiLCJTYWxlQWRtaW4iXX0sInNhbGVzLWxlYWRzLWh0dHAiOnsicm9sZXMiOlsiU2FsZXMiXX0sImFjY291bnQiOnsicm9sZXMiOlsibWFuYWdlLWFjY291bnQiLCJ2aWV3LXByb2ZpbGUiXX19LCJuYW1lIjoi6ZSA5ZSuIDAxIiwicHJlZmVycmVkX3VzZXJuYW1lIjoic2FsZXMwMSIsImdpdmVuX25hbWUiOiLplIDllK4iLCJmYW1pbHlfbmFtZSI6IjAxIn0.TyqgUCost9sDy-tE8KAPW_3tBbTnzm6xfgIY2c1FhEYR3-mfLLbh0LLdkqDJEMs9AIvElOyU1jf9YA4laA6imaNqAshPvrRhxh4wIqJ9cCTNJjrou98gxkccRSSaFX19VctxLxRGk1wC_ZlIqdg9rgklVJE1rpDpzOnm1WF-skSwoQI7UZINEeizVZC21T4eIvDLoWUU6Qp9LKW3kcahU0k44S2v1k-lMJzE8dD4rQco7Z1vswXvYOxpk5g-RPKiREo1je-ZGyZLXZiJPdLwIm7mGp1x6qOxIUnbrMZk24VwS48hBhbbKeahBS-lvfEck0vLls3EVL0JMx9gre3Jbg"
			 },
             type: "POST",
             url: "https://dev.xuebastudy.com/crm-cti/userDetail",
             data: {
					"id":"4",
					"customerNumber":"13315863006",
					"customerId":"test",
					"salesId":4
				   },
             dataType: "json",
             success: function(data){
				alert(JSON.stringify(data))
             }
         });
    });

所以后台在接收参数的时候也习惯了 request.getParameter(),或者使用@RequestParam的注解的方式。

这样是没有问题的,因为这种方式提交的时候他的请求头如下

但是新公司的前端,喜欢使用使用$.ajax(url,data,callback)的方式发起ajax,并且设定了content-type为 application/json。但是在Post的时候,我后台居然接受不到参数,瞬间一脸懵逼。

使用POSTMan模拟下情况如下

查看ajax的请求代码如下:

 

对于这种方式,如果没有使用框架的情况下,只能采用传统的流的方式接收:


    private String getXmlString(HttpServletRequest request) {
        BufferedReader reader = null;
        String line = "";
        String xmlString = null;
        try {
            reader = request.getReader();
            StringBuffer inputString = new StringBuffer();

            while ((line = reader.readLine()) != null) {
                inputString.append(line);
            }
            xmlString = inputString.toString();
        } catch (Exception e) {
//            throw new YppException(PayException.xmlParseError);
        }
        return xmlString;
    }

但是在spring boot的中可以使用@RequestBody加上对象接收

@RequestBody ParamUserDetail userDetail

当然如果不愿意构造对象的时候可以使用Map<String,String>来接收,对于少量参数建议使用这种方式

@RequestBody Map<String,String> params

 

  • 13
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
如果您的Java后台设置了consumes为multipart/form-data,并且前端通过ajax设置了contentType为false和processData为false来传递formdata,其中包含图片文件和String类型参数,则前后端格式设置应该如下: 前端ajax代码: ```javascript var formData = new FormData(); formData.append('file', $('#file-input')[0].files[0]); formData.append('name', 'example'); $.ajax({ url: 'your-url', type: 'POST', data: formData, contentType: false, processData: false, success: function(data) { console.log(data); } }); ``` 在前端代码中,您需要将contentType设置为false,以便让jQuery自动设置正确的Content-Type头。同时,您需要将processData设置为false,以防止jQuery对formdata进行序列化处理。 在Java后台代码中,您需要使用@RequestParam注解来接收formdata中的String类型参数,使用@RequestPart注解来接收formdata中的文件参数。 ```java @PostMapping(value = "/your-url", produces = MediaType.APPLICATION_JSON_VALUE, consumes = MediaType.MULTIPART_FORM_DATA_VALUE) public ResponseEntity<?> yourMethod(@RequestPart("file") MultipartFile file, @RequestParam("name") String name) { // your code here } ``` 在Java后台代码中,您需要将consumes设置为multipart/form-data,以便正确解析formdata。同时,您需要使用MultipartFile类型的参数接收formdata中的文件参数,使用@RequestParam注解来接收formdata中的String类型参数。 综上所述,您需要确保前后端代码中的参数类型和格式设置正确,以便正确地解析和传递formdata中的参数

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值