我如何将复杂对象列表从我的视图（jsp）传递给控制器​​

Question

我需要从我的视图中传递控制器中的对象列表（其中包含自身的引用）。我经历了这么多的联系，但没有得到满意的解决方案。 以下是我的场景和代码片段。 我有UI与问题和答案列表。每个问题都可以有子问题，这也是主要问题的子问题。

我想将完整的数据作为问题列表传递给我的控制器。 我的用户界面是这样的： https://i.stack.imgur.com/yA8hN.png

型号有：

问题型号：

public class Question { 

    private String question; 
    private String question_type; 
    private List<String> answers; 
    private List<Question> subQuestions; 

    .. getter and setter and constructors... 
    } 



    public class SurveyData { 

    private List<Question> data = new ArrayList<Question>(); 
    ... getter and setter and constructors... 
    } 

控制器：

@RequestMapping(value = "save", method = RequestMethod.POST) 
public ModelAndView saveData(HttpServletRequest request, HttpServletResponse response, @ModelAttribute("surveyData") SurveyData data) { 
     // code to save the data.... 
    } 

在我的jsp我这是获取所有的JavaScript方法数据并保存在隐藏的输入值中。

JSP /查看：

<form id="surveyForm" modelAttribute="surveyData" method="POST"> 
    <table style="height: 200px;" border="0" width="70" cellspacing="0"> 
     <tbody> 
      <tr style="height: 50px;"> 
       <td> 
        <h2> 
         <span style="color: #00ccff;">&nbsp;ADD NEW CALL&nbsp;</span> 
        </h2> 
       </td> 
      </tr> 
      <tr style="height: 30px;"> 
       <td> 
        <div id="question-container"> 
         <p style="padding-left: 1000px;"> 
          <span style="color: #999999;"><a style="color: #999999;" 
           title="+ ADD NEW QUESTION" href="javascript:void(0);" 
           onclick="javascript:addNewQuestion();">+ ADD NEW QUESTION</a></span> 
         </p> 
        </div> 
       </td> 
      </tr> 
      <tr style="height: 70px;"> 
       <td>&nbsp;&nbsp; 
       <input type="hidden" id="surveyData" name="surveyData" value="" /> 
       <input type = "submit" value = "Save" onclick="javascript:saveData();"/>&nbsp; 
       <input type = "submit" value = "Cancel" onclick="javascript:cancel();"/> 

       </td> 
      </tr> 
     </tbody> 
    </table> 
</form> 


    <script> 
    function saveData() { 
     var surveyData = {}; 
     var questions = []; 
     // code to fetch the data and save it in questions array 
     . 
     . 
     . 
     surveyData.data = questions; 
     $("#surveyData").val(surveyData); 
     $("#surveyForm").submit(); 
     } 
</script> 

我没有收到在modelAttribuite参数的任何数据。 如何将这些数据传递给我的控制器？

在此先感谢！

Answer 1

您可以使用列表项目的嵌套属性，其记录在Spring MVC Document。

对于您的情况，您可以通过JSTL forEach迭代和适当的项目索引在JSP中生成问题和子问题。要添加新项目，请使用JavaScript来添加一组具有新索引的输入元素。

此外，你可以在JavaScript构建你surveyData并转换为相应的HTTP请求Spring能处理：

var surveyData = { 
    data: [{ 
    question: "question1", 
    question_type: "type1", 
    answers: [ 
     "answer1", 
     "answer2" 
    ], 
    subQuestions: [] 
    }, { 
    question: "question1", 
    question_type: "type1", 
    answers: [ 
     "answer1", 
     "answer2" 
    ], 
    subQuestions: [] 
    }] 
} 

var mapData = function (data, prefix) { 
    if (Array.isArray(data)) { 
    // map array data 
    return data 
     .map((e, i) => mapData(e, prefix + '[' + i + ']')) 
     .reduce((a, b) => a.concat(b), []); 
    } else if ((typeof data === "object") && data !== null) { 
    // map object data 
    return Object.getOwnPropertyNames(data) 
     .map(k => mapData(data[k], prefix + '.' + k)) 
     .reduce((a, b) => a.concat(b), []); 
    } 
    return [{ 
    key: prefix, 
    value: data 
    }] 
} 

var surveyDataInputs = mapData(surveyData, "surveyData"); 

// remove old nodes 
document.querySelectorAll('input[type=hidden][name^=surveyData]').forEach(i => i.remove()); 

// add new nodes 
var surveyForm = document.querySelector("#surveyForm"); 
surveyDataInputs.map(d => { 
    var input = document.createElement('input'); 
    input.setAttribute("type", "hidden"); 
    input.setAttribute("name", d.key); 
    input.setAttribute("value", d.value); 
    surveyForm.appendChild(); 
}) 

$("#surveyData").val(surveyData); 
$("#surveyForm").submit();