javascript - JSON数组存储之前的数据结果

Question

所以我的问题是在第一次尝试更新我的个人资料时，没关系。它仅输出一条消息和一个结果。然而，在第二次尝试时，它输出两条消息和两个结果。我已经清除了我的数组，认为它是存储前一个结果的数组，但它什么也没做。

我的js文件如下:

$('#edit_my_profile').on('submit', function(e){
  e.preventDefault();

  var fname = $('#my_profile_fname').val(),
      mname = $('#my_profile_mname').val(),
      lname = $('#my_profile_lname').val(),
      user_number = $('#my_profile_user_number').val(),
      parent_number = $('#my_profile_parent_number').val(),
      department = $('#my_profile_department').val(),
      course = $('#my_profile_course').val(),
      year_level = $('#my_profile_year').val(),
      section = $('#my_profile_section').val(),
      username = $('#my_profile_username').val(),
      password = $('#my_profile_password').val(),
      alert = $('#my_profile_message_board');

  if(!validate([fname, mname, lname, user_number, parent_number, department, course, year_level, section, username, password])){
    notify('<i class="fas fa-times fa-lg mr-2"></i> <b>Error!</b> Cannot leave empty fields!', 'danger');
  } else if(password == 'password12345ddd'){
    notify('<i class="fas fa-times fa-lg mr-2"></i> <b>Error!</b> Please change the default password!', 'danger');
  } else{
    var modal = $('#modal_confirm_update_profile');

    modal.modal('show');

    $('#btn_update_profile').on('click', function(){
      modal.modal('hide')
      var data = $('#edit_my_profile').serializeArray();
      data[data.length] = {name : "edit_my_profile", value : 1};

      $.ajax({
        url : controllers('ProfilesController'),
        method : 'POST',
        data : data,
        dataType : 'JSON',
        success : function(e){
          // notify(e.message, e.alert);
          // my_profile_information();
          console.log(e)
        }
      })
    })
  }
})

这是我的 ProfilesController.php:

if(isset($_POST['edit_my_profile'])){
    $fname = $init->post('my_profile_fname');
    $mname = $init->post('my_profile_mname');
    $lname = $init->post('my_profile_lname');
    $user_number = $init->post('my_profile_user_number');
    $parent_number = $init->post('my_profile_parent_number');
    $section = $init->post('my_profile_section');
    $username = $init->post('my_profile_username');
    $password = encrypt($init->post('my_profile_password'));
    $updated_at = Carbon::parse($user_updated_at);

    $validate = validate([$fname, $mname, $lname, $user_number, $parent_number, $section, $username, $password]);

    $now = Carbon::now()->toDayDateTimeString();
    $length_in_days = $updated_at->diffInMinutes($now);

    if($length_in_days < 7){
        $json['bool'] = false;
        $json['alert'] = 'danger';
        $json['message'] = "<b>Error!</b> Calm down officer! You have recently updated your profile $length_in_days ago!";
    } else{
        if(!$validate){
            $json['bool'] = false;
            $json['alert'] = 'danger';
            $json['message'] = '<b>Error!</b> Cannot leave empty fields!';
        } else{
            $sql = $init->query("UPDATE users SET fname = '$fname', mname = '$mname', lname = '$lname', user_number = '$user_number', parent_number = '$parent_number', section_id = '$section', username = '$username', password = '$password' WHERE student_id = {$_SESSION['student_id']}");

            if($sql){
                $json['bool'] = true;
                $json['alert'] = 'primary';
                $json['message'] = '<i class="fas fa-thumbs-up fa-lg fa-spin"></i> Successfully updated your profile!';
            } else{
                $json['bool'] = false;
                $json['alert'] = 'danger';
                $json['message'] = '<b>Error!</b> Something went wrong!';
            }
        }
    }

    $json['error'] = $init->error();
    echo json_encode($json);
}

我第二次尝试的结果是这样的(chrome 的控制台):

{bool: false, alert: "danger", message: "<b>Error!</b> Calm down officer! You have recently updated your profile 5 ago!", error: ""}
{bool: false, alert: "danger", message: "<b>Error!</b> Calm down officer! You have recently updated your profile 5 ago!", error: ""}
{bool: false, alert: "danger", message: "<b>Error!</b> Calm down officer! You have recently updated your profile 5 ago!", error: ""}

它应该只输出一个。

Answer 1

问题来自于将 click 监听器添加到 #btn_update_profile 内部您的 submit 监听器。每次提交表单时，按钮都会被告知在单击时调用一个新函数，这就是为什么第二次提交会发送两次 POST 请求以及您在控制台中看到两个日志的原因。

假设 #btn_update_profile 在您的模态中，更改您的代码，以便您只添加 click 监听器一次，并且在该监听器内部您可以检查一个变量查看表单是否已提交。