【发布时间】：2015-09-16 08:08:25
【问题描述】：
我有一个用 php 编写的小测验，有两种类型的问题：通过单选按钮的单选答案和通过复选框的多选答案。代码在单个文件（“quiz.php”）中运行，该文件处理问题的显示以及答案的处理。
一切都很顺利，直到我不得不为答案的“可排序列表”添加第三种类型——人们必须重新排序选择列表。
经过一番研究，我找到了我认为的答案：jQuery UI 的“可排序”交互。简单、直接且易于实施……即使我似乎无法让它发挥作用！
我的问题是，如果我对 PHP/MySql 有一点了解，我对 Javascript 的了解就很少，当然也没有足够的知识来正确编写或调试它。
这是代码，从所有用于显示问题和答案过程的 php 开始：
// File quiz.php
<?php session_start();
// if the form has just been submitted, handle the answers
if (isset($_POST['submit'])) {
// Do something, on a case by case basis :
switch ($_SESSION['questionType']) {
case 1 : // for radio buttons
// some code to process and save the answer to the database
break ;
case 2 : // for checkboxes
// some code to process and save the answer to the database
break ;
case 3 : // for sortable lists
// some code to process and save the answer to the database
break ;
}
}
// Here, get the elements to show from the DB, including
// the question type for the switch below
// questionType = 1 for single choice answer
// questionType = 2 for multiple choice answer
// questionType = 3 for sortable choice answer
?>
接下来是显示问题的html：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quiz</title>
<link rel="stylesheet" href=./quiz.css">
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/jquery-ui.min.js"></script>
</head>
<body>
<?php // A bunch of code to echo the question ?>
<form action="quiz.php" method="POST">
<?php // A switch to adapt the display to the type of questions :
switch ($_SESSION['questionType']) {
case 1 : // for single choice answer
// A bunch of code to echo the possible choices w/ radio buttons
break ;
case 2 : // for multiple choice answer
// A bunch of code to echo the possible choices w/ checkboxes
break ;
case 3 : // for sortable lists ?>
<!-- the following would normaly be generated via php with info from the DB -->
<ul id="sort">
<li id="choice_1">Item 1</li>
<li id="choice_2">Item 2</li>
<li id="choice_3">Item 3</li>
<li id="choice_4">Item 4</li>
<li id="choice_5">Item 5</li>
</ul>
<?php break ; ?>
<?php } ?>
<input type="submit" name="submit" value="Submit">
</form>
这就是它崩溃的地方
<script type="text/javascript">
$(function() {
$("#sort").sortable({
var newOrder = $(this).sortable('serialize');
// the 'quiz.php' file called below is the one we're in
$.post('quiz.php', {sort: newOrder };
});
$("#sort").disableSelection();
});
</script>
</body>
</html>
让我难过的是，不仅在提交表单后结果没有发送到 $_POST ——所以什么也没有发生——而且 $("#sort").sortable( ) 函数完全破坏了交互行为，即列表不可排序并且可以选择文本。
任何提示，帮助？
[编辑]：感谢 Jordan，我已经运行了可排序部分，但数据仍未发送。
现在使用的代码：
<script type="text/javascript">
$(function() {
$('#sort-form').on('submit',function(event){
// Prevent the form from being submitted normally
event.preventDefault();
var newOrder = $(this).sortable('serialize');
$.post('quiz.php', {sort: newOrder };
});
</script>
不会产生任何结果，Chrome 中的控制台现在说在结束标记之前有一个“未捕获的语法错误：输入的意外结束”。 我不知道它是否相关，但它让我认为 要么我在某处遗漏了一个错字，要么该函数需要更多参数......
[编辑 2] 将 <li> id 上的“-”替换为下划线（更符合 jQuery UI 指南）
【问题讨论】：
-
嘿顺便说一句，您在最后一个之后又错过了另一个
});，这就是为什么您会收到意外的输入错误结束
标签： javascript php jquery jquery-ui post