我为民意调查创建了一个JQuery UI可排序列表，因为我需要用户按顺序或首选项（从1到6）对答案进行排序。
我能够在javascript对象中获取响应顺序，我现在正在寻找将此对象传递到PHP页面的最佳方法，该页面将根据列表中的响应位置计算分数（例如：位置0 = 10分，1 = 15分等）并显示最终分数。
这是检索列表顺序的正确方法吗？ 是否有推荐的方式将其发布到php页面？ 我正在考虑将此对象传递给隐藏的输入并使用表单发布。
到目前为止，这是我的代码
// Get number of questions
var nbQuestions = document.getElementsByClassName('question-group');
// Sortable list
$(function () {
for ( var i = 0 ; i < nbQuestions.length ; i++ ) {
$("#question"+(i+1)+"-responses, #question"+(i+1)+"-responses-out").sortable({
placeholder: "list-group-item list-group-item-warning",
connectWith: ".question"+(i+1),
items: "li:not(.ui-state-disabled)"
});
}
});
// Get results in array
function getResponses() {
var Response = {
init: function(question, responses) {
this.question = question;
this.responses = responses;
}
};
// Array of all responses
var allResponses = [];
// For each question, get responses
for ( var i = 0 ; i < nbQuestions.length ; i++ ) {
var responses = $("#question"+(i+1)+"-responses").sortable("toArray"); // Reponses order
var questionResponses = []; // Group question + responses
questionResponses[i] = Object.create(Response);
questionResponses[i].init("question"+(i+1), responses);
allResponses.push(questionResponses[i]);
}
console.log(JSON.stringify(allResponses)); // for testing
return JSON.stringify(allResponses);
}section ul:first-child {
margin-top: 40px;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<title>My page</title>
</head>
<body>
<div class="container">
<form id="form">
<section id="question-group1">
<div class="question-group">
<ul id="question1-responses" class="responses question1 list-group">
<li id="qr1" class="ui-state-default list-group-item">q1-1</li>
<li id="q1r2" class="ui-state-default list-group-item">q1-2</li>
<li id="q1r3" class="ui-state-default list-group-item">q1-3</li>
<li id="q1r4" class="ui-state-default list-group-item">q1-4</li>
<li id="q1r5" class="ui-state-default list-group-item">q1-5</li>
<li id="q1r6" class="ui-state-default list-group-item">q1-6</li>
</ul>
<ul id="question1-responses-out" class="responses question1 list-group">
<li class="ui-state-disabled list-group-item">Drag below unapplicable answers.</li>
</ul>
</div>
<div class="question-group">
<ul id="question2-responses" class="responses question2 list-group">
<li id="q2r1" class="ui-state-default list-group-item">q2-1</li>
<li id="q2r2" class="ui-state-default list-group-item">q2-2</li>
<li id="q2r3" class="ui-state-default list-group-item">q2-3</li>
<li id="q2r4" class="ui-state-default list-group-item">q2-4</li>
<li id="q2r5" class="ui-state-default list-group-item">q2-5</li>
<li id="q2r6" class="ui-state-default list-group-item">q2-6</li>
</ul>
<ul id="question2-responses-out" class="responses question2 list-group">
<li class="ui-state-disabled list-group-item">Drag below unapplicable answers.</li>
</ul>
</div>
</section>
<section id="question-group2">
<div class="question-group">
<ul id="question1-responses" class="responses question1 list-group">
<li id="q3r1" class="ui-state-default list-group-item">q3-1</li>
<li id="q3r2" class="ui-state-default list-group-item">q3-2</li>
<li id="q3r3" class="ui-state-default list-group-item">q3-3</li>
<li id="q3r4" class="ui-state-default list-group-item">q3-4</li>
<li id="q3r5" class="ui-state-default list-group-item">q3-5</li>
<li id="q3r6" class="ui-state-default list-group-item">q3-6</li>
</ul>
<ul id="question1-responses-out" class="responses question1 list-group">
<li class="ui-state-disabled list-group-item">Drag below unapplicable answers.</li>
</ul>
</div>
<div class="question-group">
<ul id="question2-responses" class="responses question2 list-group">
<li id="q4r1" class="ui-state-default list-group-item">q4-1</li>
<li id="q4r2" class="ui-state-default list-group-item">q4-2</li>
<li id="q4r3" class="ui-state-default list-group-item">q4-3</li>
<li id="q4r4" class="ui-state-default list-group-item">q4-4</li>
<li id="q4r5" class="ui-state-default list-group-item">q4-5</li>
<li id="q4r6" class="ui-state-default list-group-item">q4-6</li>
</ul>
<ul id="question2-responses-out" class="responses question2 list-group">
<li class="ui-state-disabled list-group-item">Drag below unapplicable answers.</li>
</ul>
</div>
</section>
<input type="submit" value="Send" id="getresponses">
</form>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/functions.js"></script>
</body>
</html>
这是我得到的结果：
[{"question":"question1","responses": ["q1r1","q1r2","q1r3","q1r4","q1r5","q1r6"]},{"question":"question2","responses":["q2r1","q2r2","q2r3","q2r4","q2r5","q2r6"]},{"question":"question3","responses":["q3r1","q3r2","q3r3","q3r4","q3r5","q3r6"]},{"question":"question4","responses":["q4r1","q4r2","q4r3","q4r4","q4r5","q4r6"]},{"question":"question5","responses":["q5r1","q5r2","q5r3","q5r4","q5r5","q5r6"]},{"question":"question6","responses":["q6r1","q6r2","q6r3","q6r4","q6r5","q6r6"]},{"question":"question7","responses":["q7r1","q7r2","q7r3","q7r4","q7r5","q7r6"]},{"question":"question8","responses":["q8r1","q8r2","q8r3","q8r4","q8r5","q8r6"]}]
由于