0

我使用 jQuery Ajax 和 PHP 编写了一个脚本，它应该从 MySQL 数据库中获取数据并将结果作为元素附加到<option>一个<select>元素中。

代码应该像这样工作：

当文本输入中的名称发生变化时，类的所有选项都会.modpick从<select>元素中删除。然后，一个 Ajax 调用连接到一个 PHP 脚本，该脚本检查数据库中是否有多个同名记录。如果没有，另一个 Ajax 调用将连接到另一个 PHP 脚本，该脚本从数据库中提取数据并将其作为<option>元素回显。然后，Ajax 回调将 PHP 脚本中的数据附加到<select>元素。

我遇到的问题是，有时<option>元素被附加了两次，所以当你打开<select>元素时，它会显示<option>两次。真正令人困惑的是，这种情况并非一直发生——只是偶尔发生。

我无法弄清楚为什么会发生这种情况，尤其是因为它并非每次都发生，我也无法确定这是 jQuery 还是 PHP 的问题。任何帮助将不胜感激。

编码：

jQuery：

$(document).on('change', "#uploadname", function () {
    uploadname = $(this).val();
    $('.modpick').remove();
    $.ajax({
        url: "uploadnames.php",
        type: "POST",
        data: {
            uploadname: uploadname
        },
        success: function (data) {
            $('#checkulinputs').html(data);
            uploademailcheck = $('#emailupcheckinput').val();

            if (uploademailcheck == 'nochoose') {
                uploademail = '';
                $('#ulemailcheck').slideUp();
                $.ajax({
                    url: "uploadnamesmodules.php",
                    type: "POST",
                    data: {
                        uploadname: uploadname
                    },
                    success: function (data) {
                        $(data).appendTo($('#uploadmoduleselect'));
                    }
                });
            }
        }
    })
})

PHP：

include_once('../../dbconnect.php');

$name = mysqli_real_escape_string($conn, $_POST['uploadname']);
$query = "SELECT * FROM marking_assignments WHERE name = '$name' ORDER BY unit ASC";
$details = $conn->query($query);

while ($row = $details->fetch_assoc()){
 $modnamequery = "SELECT mod_name FROM modules WHERE module = '" . $row['unit'] . "'";
 $modname = $conn->query($modnamequery);
 while ($line = $modname->fetch_assoc()){
  $descrip = $line['mod_name'];
  }

echo '<option  value="' . $row['unit'] . '" id="m' . $row['unit'] . '" class="modpick">' . $descrip . '</option>'; 

}

HTML（运行查询后 - 注意两个相同的<option>元素）：

<form id="uploadfeedbackform" method="POST" action="uploadfeedback.php">
  <input type="text" class="inputs" name="upload_name" id="uploadname" placeholder="Enter Student Name" />

  <div id="checkulinputs"></div>
  <div id="ulemailcheck" class="emailchecker"></div>

  <select id="uploadmoduleselect" name="uploadmodules">
     <option  value="choose" class="choosemod">Select Module</option>
     <option value="405" id="m405" class="modpick">4.05 Managing Health & Safety at Work</option>
     <option value="405" id="m405" class="modpick">4.05 Managing Health & Safety at 
  </select>
 </form>
4

1 回答 1

1

在我看来，您的change处理程序可以被多次调用，从而导致多个 ajax 请求（非常正确）触发它们的成功回调。Ajax 请求只会排队而不是替换先前的请求，从而导致可能的待处理回调队列。

您可以将 ajax 请求存储在一个变量中，并abort()在您的处理程序以某种方式被调用两次的情况下存储该请求。

例子：

var myRequest;

//in your change handler...
if (myRequest)
{
    myRequest.abort();
}
myRequest = $.ajax({...});

这样，一次只会有一个活动的 ajax 请求，并且只有一个挂起的成功回调。

于 2013-07-26T16:09:37.447 回答