使用 Jquery Ajax 将列表传递给 Spring Controller

Question

我们的代码中有多个ModelBean 类。我们需要使用 AJAX 调用将不同分类的数据发送到 Main modelBean 类（如 list、object、string 等）。我尝试了以下代码并且能够发送String 类型但不能发送list 或object。从AJAX，我们需要发送到Spring controller。主 Bean 类是MainBean。

public class MainBean {

private String name;
private List<Truck> truckList;
private Address address;

}
public class Address {
    private String houseNumber;
    private String area;
    private String city;
}

public class Truck {
    private String truckName;
    private Type type;
}

public class Type{
    private String medium;
    private String heavy;
}

---

控制器类

@RequestMapping(value="/saveData", method = RequestMethod.POST)
    public ModelAndView saveData(@ModelAttribute("mainBean")MainBean mainBean){

        truckService.saveData(mainBean);

        return new ModelAndView("redirect:/main");
    }

---

AJAX 代码

$( document ).ready(function() {

var url = window.location;

// SUBMIT FORM
$("#customerForm").submit(function(event) {
    // Prevent the form from submitting via the browser.
    event.preventDefault();
    ajaxPost();
});


function ajaxPost(){

    // PREPARE FORM DATA
    var formData = {
        firstname : $("#name").val(),
        truckName :  $("#truckName").val(),
        medium :  $("#medium").val(),
        heavy :  $("#heavy").val(),
        houseNumber :  $("#houseNumber").val()
    }

    // DO POST
    $.ajax({
        type : "POST",
        contentType : "application/json",
        url : url + "/postcustomer",
        data : JSON.stringify(formData),
        dataType : 'json',
        success : function(result) {
            if(result.status == "Done"){
                $("#postResultDiv").html("<strong>" + "Success" + "</strong>");
            }else{
                $("#postResultDiv").html("<strong>Error</strong>");
            }
            console.log(result);
        },
        error : function(e) {
            alert("Error!")
            console.log("ERROR: ", e);
        }
    });
}

})

Answer 1

您需要将数据作为字符串发送到控制器，一旦您将数据输入控制器，您就可以将其解析为列表，或者您想要的任何类型：

@RequestMapping(value="/saveData", method = RequestMethod.POST)
public ModelAndView saveData(@ModelAttribute("mainBean")String mainBeanString){


    ObjectMapper mapper = new ObjectMapper();
    List<MainBean> itemsFromController = mapper.readValue(mainBeanString, mapper.getTypeFactory().constructCollectionType(List.class, MainBean.class));
    truckService.saveData(itemsFromController);

    return new ModelAndView("redirect:/main");
}

ObjectMapper来自杰克逊库

import com.fasterxml.jackson.databind.ObjectMapper;

[编辑]：

创建您在 java 中创建的相同模型：

var mainBean = {
    name: "",
    truckList: [],
    address: {}
}

那么你可以像这样传递值：

mainBean.address.houseNumber = $("#houseNumber").val();

一旦您在 Javascript 中创建了模型，您就可以将其放入 ajax 调用中

data : JSON.stringify(mainBean)