Question

我使用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>

Answer 1

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

如果您的处理程序以某种方式被调用两次，您可以将ajax请求存储在变量和abort()请求中。

示例：

var myRequest;

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

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

Jquery Ajax对PHP的调用有时会将数据附加两次

1 个答案: