通过jQuery/ajax+JSON将ID和字符串数组传递给Spring MVC

时间:2021-06-15 21:33:38

I need to POST a request via jQuery.ajax() to a Spring MVC controller URL mapped method and receive a response; both request and response data is in JSON format.

我需要通过jQuery.ajax()向Spring MVC控制器URL映射方法发送请求并接收响应;请求和响应数据都是JSON格式。

Ajax call would be something like this:

Ajax调用应该是这样的:

$.ajax({
    url: "/panelsData",
    dataType: "json",
    data: { "id": 1, "panels": [ "View1", "View2", "View3" ] },
    success: function(data) {...}
});

Spring MVC controller URL mapped method:

Spring MVC控制器URL映射方法:

@RequestMapping(value="/panelsData", method = RequestMethod.POST,
        produces = MediaType.APPLICATION_JSON_VALUE,
        consumes = MediaType.APPLICATION_JSON_VALUE)
@ResponseStatus(value=HttpStatus.OK)
@ResponseBody
public List<PanelData> getPanelsDataById(
         @RequestParam("id") BigDecimal id,
         @RequestParam("panels") List<String> panelsList) {

    // Process list of Strings corresponding to panel view names
    // and return a list of PanelData objects (in JSON format).
}

The first problem I faced was that the client (browser) failed with error code 400 (Bad Request). So, I JSON.stringify'ed the array in the ajax call:

我遇到的第一个问题是客户端(浏览器)在错误代码400(错误请求)下失败。所以,我JSON。在ajax调用中字符串化数组:

data: { "id": 1, "panels": JSON.stringify([ "View1", "View2", "View3" ]) },

This time, the request was successfully received by Spring MVC. But something was amiss with the list of String values. When I examined the values, here's what I saw:

这一次,Spring MVC成功地接收了请求。但是字符串值列表有问题。当我检查这些值时,我看到的是:

panelsList[0] = ""[View1""
panelsList[1] = ""View2""
panelsList[2] = ""View3]""

What?! I was expecting these values:

什么? !我期望这些价值:

panelsList[0] = "View1"
panelsList[1] = "View2"
panelsList[2] = "View3"

Am I incorrectly serializing (or de-serializing) the values? Given that the exchange of data must all be JSON, and that I am using the Jackson library, I was expecting that receiving an ID and a list of String values from the client in JSON should not be all that difficult. I know the Jackson library configuration is perfect, because the JSON responses returned by the other methods are correctly formed.

是否对值进行了不正确的序列化(或反序列化)?由于数据交换必须都是JSON,而且我正在使用Jackson库,所以我希望用JSON接收来自客户机的ID和字符串值列表应该不会那么困难。我知道Jackson库配置是完美的,因为其他方法返回的JSON响应是正确的。

1 个解决方案

#1


3  

I think it would be better if you can restructure your code something like below.

我认为如果你能重组你的代码像下面这样会更好。

rather than passing/receiving them in separate argument,you can create PanelDataJson class,which contains both id and list of panel.

与其在单独的参数中传递/接收它们,不如创建PanelDataJson类,该类包含id和面板列表。

class PanelDataJson{
    BigDecimal id;
    List<String> panelsList;

     //Getter and Setter

}

And then change your method like below.

然后像下面这样改变你的方法。

@RequestMapping(value="/panelsData", method = RequestMethod.POST,
        produces = MediaType.APPLICATION_JSON_VALUE,
        consumes = MediaType.APPLICATION_JSON_VALUE)
@ResponseStatus(value=HttpStatus.OK)
@ResponseBody
public List<PanelData> getPanelsDataById(
         @RequestBody PanelDataJson) {

    // Process list of Strings corresponding to panel view names
    // and return a list of PanelData objects (in JSON format).
}

And from your front end,just stringify your whole data,not partially.

从你的前端,只是把你的全部数据,而不是部分。

$.ajax({
    url: "/panelsData",
    dataType: "json",
    data: JSON.stringify({ "id": 1, "panels": [ "View1", "View2", "View3" ] }),
    type: "POST",
    contentType : 'application/json; charset=utf-8',
    success: function(data) {...}
});

#1


3  

I think it would be better if you can restructure your code something like below.

我认为如果你能重组你的代码像下面这样会更好。

rather than passing/receiving them in separate argument,you can create PanelDataJson class,which contains both id and list of panel.

与其在单独的参数中传递/接收它们,不如创建PanelDataJson类,该类包含id和面板列表。

class PanelDataJson{
    BigDecimal id;
    List<String> panelsList;

     //Getter and Setter

}

And then change your method like below.

然后像下面这样改变你的方法。

@RequestMapping(value="/panelsData", method = RequestMethod.POST,
        produces = MediaType.APPLICATION_JSON_VALUE,
        consumes = MediaType.APPLICATION_JSON_VALUE)
@ResponseStatus(value=HttpStatus.OK)
@ResponseBody
public List<PanelData> getPanelsDataById(
         @RequestBody PanelDataJson) {

    // Process list of Strings corresponding to panel view names
    // and return a list of PanelData objects (in JSON format).
}

And from your front end,just stringify your whole data,not partially.

从你的前端,只是把你的全部数据,而不是部分。

$.ajax({
    url: "/panelsData",
    dataType: "json",
    data: JSON.stringify({ "id": 1, "panels": [ "View1", "View2", "View3" ] }),
    type: "POST",
    contentType : 'application/json; charset=utf-8',
    success: function(data) {...}
});