使用onkeyup javascript时如何再次停止和启动Ajax提交表单?

时间:2018-10-22 07:06:47

标签: javascript jquery html ajax

当新的QPushButton事件触发时,我试图停止上一个AJAX请求。图案是这样的:

  1. 用户输入sizeHint(),我的代码将使用AJAX提交表单,其中 def create_settings_group(self): group_box_settings = QtGui.QGroupBox(self) group_box_settings.setTitle("Settings") grid = QtGui.QGridLayout() grid.addWidget(self.label_1, 3, 0) grid.addWidget(self.label_2, 3, 2) grid.addWidget(self.label_3, 0, 0) grid.addWidget(self.label_4, 1, 0) grid.addWidget(self.label_6, 2, 0) grid.addWidget(self.label_7, 3, 4) grid.addWidget(self.label_8, 3, 6) grid.addWidget(self.label_9, 3, 8) grid.addWidget(self.line_edit_1, 0, 1, 1, 9) self.push_button_1.setSizePolicy(QtGui.QSizePolicy.Maximum, QtGui.QSizePolicy.Fixed) hlay1 = QtGui.QHBoxLayout() hlay1.addWidget(self.combo_box_1) hlay1.addWidget(self.push_button_1) grid.addLayout(hlay1, 1, 1, 1, 9) self.push_button_2.setSizePolicy(QtGui.QSizePolicy.Maximum, QtGui.QSizePolicy.Fixed) hlay2 = QtGui.QHBoxLayout() hlay2.addWidget(self.combo_box_2) hlay2.addWidget(self.push_button_2) grid.addLayout(hlay2, 2, 1, 1, 9) grid.addWidget(self.line_edit_2, 3, 1) grid.addWidget(self.line_edit_3, 3, 3) grid.addWidget(self.line_edit_4, 3, 5) grid.addWidget(self.line_edit_5, 3, 7) grid.addWidget(self.line_edit_6, 3, 9) grid.addWidget(self.check_box_1, 0, 10) grid.addWidget(self.check_box_2, 1, 10) grid.addWidget(self.check_box_3, 2, 10) group_box_settings.setLayout(grid) return group_box_settings keyup
  2. 当用户输入A时,我想从第一步停止AJAX请求,并以test_value中的A发出新请求。
B
test_value

1 个答案:

答案 0 :(得分:1)

要实现所需的功能,您可以将对先前AJAX请求的引用保存在变量中,然后在发生新的abort()事件时对此调用keyup

还要注意,您不应该使用on*事件属性。在页面中包含jQuery后,您可以使用它来附加不引人注目的事件处理程序。您还可以使用jQuery选择元素并更简洁地使用它们。试试这个:

<input type="text" id="xxx" autocomplete="off">
<div id="loading">please wait.....</div>
<span id="myplace_test"></span>
<form id="test_fid" method="POST" action="">
  <input type="text" name="test_value" id="test_value">
</form>
var activeRequest;

$('#xxx').on('keyup', function(e) {
  $("l#oading").show()
  $("#test_value").val(this.value);
  activeRequest && activeRequest.abort();

  activeRequest = $.ajax({
    url: "test.php",
    type: "POST",
    data: $('#test_fid').serialize(),
    cache: false,
    success: function(data) {
      $('#myplace_test').html(data);
      $("#loading").hide();
    }
  });
});
#loading,
#test_fid { 
  display: none; 
}

还请注意使用CSS包含样式规则,而不是将其内嵌在HTML中。