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

Question

焦点区域:看到 th:value="1"了吗？它通过 JavaScript 表单传递并作为字符串数组的一部分返回到 Controller 。是否可以将其转换为 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 来请求参数 ints/Integers 的数组/列表。我使用 SpringBoot 向 Controller 请求参数，如下所示:

 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[])

Answer 1

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

checkedRadios.push(Number(radio.value))