Question

当我使用ajax（使用jquery）调用php脚本时，我正在尝试将按钮的状态更改为禁用。我发送数据库中的所有信息并获得返回但 ajaxStart 无法执行。如何解决问题以改变按钮的状态？
这是代码： HTML和JAVASCRIPT

$(document).ready(function() {
  // $("#load").hide();
  var name;
  var age;
  var post
  $(".formulaire").submit(function() {
    name = $("#name").val();
    age = $("#age").val();
    post = $("#post").val();
    $.post('sequence.php', {
      u_name: name,
      age: age,
      post: post
    }, dats);
    $("#bouton").ajaxStart(function() { // Nous ciblons l'élément #loading qui est caché
      $("#bouton").attr('disabled', 'disabled');
      console.log("*********");
    });
    return false;

    function dats(data) {
      $("#div1").html(data);
      $("#name").val("");
      $("#age").val("");
      $("#post").val("");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="the-form" style="width:45%;margin:auto;">
  <form class="form-group formulaire" method="POST">
    <input type="text" name="u_name" id="name" class="form-control" placeholder="Your name">
    <input type="text" name="age" id="age" class="form-control" placeholder="your age">
    <textarea name="post" cols="30" id="post" rows="10" class="form-control"></textarea>
    <button class="btn btn-info btn-md" id="bouton" type="submit">submit</button>
  </form>
</div>

Answer 1

以下是示例代码：

$(document).ready(function () {
    var name, age, post;
    $(".formulaire").submit(function (event) {
        event.preventDefault();

        name = $("#name").val();
        age = $("#age").val();
        post = $("#post").val();
        $("#bouton").attr('disabled','disabled');

        $.post('sequence.php',
            {
                u_name: name,
                age: age,
                post: post
            }, function (data) {
                $("#div1").html(data);
                $("#name").val("");
                $("#age").val("");
                $("#post").val("");
                $("#bouton").removeAttr('disabled');
            }
        );
    });
});

Answer 2

JQuery global Ajax events的所有处理程序（包括使用.ajaxStart()方法添加的处理程序）必须附加到文档中。

所以你应该这样做：

$(document).ajaxStart(function () {
     $("#bouton").attr('disabled','disabled');
});

如果您在代码的任何地方$.ajax ajaxStart，ajax将始终针对所有$.Post被解雇，这不是一个好主意。

正如JQuery文档所说，$.ajax({ type: "POST", url: url, data: data, success: success, dataType: dataType });是一个简写的Ajax函数，它相当于：

$.ajax

最好使用$.Post代替.beforeSend并处理$.ajax({ beforeSend: function(){ $("#bouton").attr('disabled','disabled'); }, complete: function(){ //Completed } // ...... }).done(function() { $("#bouton").removeAttr('disabled'); });，例如：

$(document).ready(function () {
    var name, age, post;
    $(".formulaire").submit(function(){
        console.clear();
        name=$("#name").val();
        age=$("#age").val();
        post=$("#post").val();
        $.post('sequence.php',
        {
            u_name:name,
            age:age,
            post:post
        },dats
        );  
        return false;
        function dats(data){
            $("#div1").html(data);
            $("#name").val("");
            $("#age").val("");
            $("#post").val("");
        }
    }); 
$(document).ajaxStart(function() {
  $("#bouton").attr('disabled','disabled');
  console.log('started...');
}).ajaxStop(function() {
 $("#bouton").removeAttr('disabled');
 console.log('stoped...');
});
});

提供测试代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="the-form" style="width:45%;margin:auto;">
        <form class="form-group formulaire" method="POST">
            <input type="text" name="u_name" id="name" class="form-control" placeholder="Your name">
            <input type="text" name="age" id="age" class="form-control" placeholder="your age">
            <textarea name="post" cols="30" id="post" rows="3" class="form-control"></textarea>
            <button class="btn btn-info btn-md" id="bouton" type="submit" >submit</button>
        </form>
    </div>

  $list = [10, 20, 30];

  $map = array_map(function ($item) {
    return [
      $item => 'banana' . time(),
    ];
  }, $list);

无法执行事件ajaxStart（）

2 个答案: