从选中的单选按钮传递整数数组,而不是数字字符串

时间:2018-09-26 05:19:39

标签: javascript java spring type-conversion thymeleaf

焦点区域:看到th:value =“ 1”吗?这是通过JavaScript表单传递的,并作为字符串数组的一部分返回给控制器的。可以将其转换为int吗?

 <input
                                type="radio"
                                th:name="'userAnswer' + ${iter.index}"
                                th:value="1"
                                th:attr = "data-question-id=${question.value}, data-question-key=${question.key}" /> 

如果您需要更多背景信息,请在这里。

model.addAttribute("title", "Take The Test!");
model.addAttribute("currentMatchingTestQuestions", questions);
model.addAttribute("newList", shuffleMap);
model.addAttribute("test",currentTest);

<div th:each="question, iter : ${newList}" name="questions" class="list-group">
                <h2 th:text="${question.key}" class="list-group-item-heading">User Display Name</h2>
                <div class="form-group">
                    <br></br>
                    <label th:for="desiredAnswer1">Desired Answer</label>
                    <br></br>
                    <!--maybe put div for each hidden input?-->
                    <!--iter. index is so that each name is different, so we can click one button per question.-->
                    <input
                            type="radio"
                            th:name="'userAnswer' + ${iter.index}"
                            th:value="1"
                            th:attr = "data-question-id=${question.value}, data-question-key=${question.key}"

                            /> Always True
                    <!--<input type="hidden" th:value="${question.id}" name="questionId" />-->
                    <input type="hidden" th:name="userAnswer" th:value="1" class="userAnswers"/>
                    <br></br>
                    <input
                            type="radio"
                            th:name="'userAnswer' + ${iter.index}"
                            th:value="2"
                            th:attr = "data-question-id=${question.value}, data-question-key=${question.key}"
                    />  Mostly True
                    <!--<input type="hidden" th:value="${question.id}" name="questionId" />-->
                    <input type="hidden" th:name="userAnswer" th:value="2" class="userAnswers" />
                    <br></br>
                    <input
                            type="radio"
                            th:name="'userAnswer' + ${iter.index}"
                            th:value="3"
                            th:attr = "data-question-id=${question.value}, data-question-key=${question.key}"
                    />  Sometimes True Sometimes False
                    <!--<input type="hidden" th:value="${question.id}" name="questionId" />-->
                    <input type="hidden" th:name="userAnswer" th:value="3" class="userAnswers"/>
                    <br></br>
                    <input
                            type="radio"
                            th:name="'userAnswer' + ${iter.index}"
                            th:value="4"
                            th:attr = "data-question-id=${question.value}, data-question-key=${question.key}"
                    /> Mostly False
                    <!--<input type="hidden" th:value="${question.id}" name="questionId" />-->
                    <input type="hidden" th:name="userAnswer" th:value="4" class="userAnswers"/>
                    <br></br>
                    <input
                            type="radio"
                            th:name="'userAnswer' + ${iter.index}"
                            th:value="5"
                            th:attr = "data-question-id=${question.value}, data-question-key=${question.key}"
                    />  Always False
                    <!--<input type="hidden" th:value="${question.id}" name="questionId" />-->
                    <input type="hidden" th:name="userAnswer" th:value="5" class="userAnswers"/>
                    <br></br>
                </div>
        </div>

function findChecked() {

    const checkedRadios = [];
    const questionIds = []; //arrays
    const questionKeys = [];
    const answerInput = document.querySelector('#allAnswers'); //why is this declared twice again?
    const questionIdInput = document.querySelector('#questionIds');//sets variable for hidden input of questionIds
    const questionKeysInput = document.querySelector('#questionKeys');
    const radios = document.querySelectorAll('input[type=radio]');// sets variable for all radio button values
    radios.forEach(radio =>{ //loops through radio values
    if(radio.checked){ // if the radio button is checked
        checkedRadios.push(radio.value); //push the value of radio button to checkedRadios array
        questionIds.push(radio.dataset.questionId);//push question.Id to questionIds array. Notice that dataset interprets...
        questionKeys.push(radio.dataset.questionKey);                                  //...question.id as questionId

        }

    });
    answerInput.value = checkedRadios; // pass array of checked radios to answerInput for the id of "allAnswers" hidden input
    questionIdInput.value = questionIds;// same as above but for id="questionIds" hidden input
    questionKeysInput.value = questionKeys;
    console.log(checkedRadios);//debug
    console.log(questionIds);
}

我正在使用JavaScript表单来获取每个用户答案并将其放入数组中。但是,现在它只能发送数字字符串数组。有没有一种方法可以使用JS或Thymeleaf来请求参数一个int / Integers数组/列表。我正在使用SpringBoot将参数请求到控制器中,如下所示:

 public String processTakeTest(Model model, @PathVariable int testId, HttpSession session, @RequestParam(name="allAnswers") String allAnswers[],
                              @RequestParam(name="questionIds") String questionIds[], @RequestParam(name="questionKeys") String questionKeys[])

1 个答案:

答案 0 :(得分:1)

使用Number()将字符串转换为数字

checkedRadios.push(Number(radio.value))