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并转换为Spring可以处理的正确http请求：

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();

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

1 个答案: