Jquery_jquery에서 Ajax의 beforeSend 메소드를 현명하게 사용

jQuery는 자주 사용되는 오픈 소스 js 프레임워크입니다. $.ajax 요청에는 서버에 요청을 보내기 전에 몇 가지 작업을 수행하는 데 사용되는 beforeSend 메서드가 있습니다.

$.ajax({
  beforeSend: function(){
   // Handle the beforeSend event
  },
  complete: function(){
   // Handle the complete event
  }
  // ......
});

데이터 중복 방지
실제 프로젝트 개발에서는 네트워크나 기타 이유로 인해 양식을 제출할 때 사용자가 제출 버튼을 클릭하고 작업이 성공하지 못했다고 잘못 생각한 후 프런트 엔드 코드에서 제출 버튼 작업을 반복하는 경우가 많습니다. 페이지의 일부 해당 처리를 수행하지 않으면 일반적으로 여러 개의 동일한 데이터가 데이터베이스에 삽입되어 더티 데이터가 증가합니다. 이 현상을 방지하려면 $.ajax 요청의 beforeSend 메서드에서 제출 버튼을 비활성화하고 Ajax 요청이 완료될 때까지 기다린 후 버튼의 사용 가능 상태를 복원하세요.

예:

// 提交表单数据到后台处理
$.ajax({
  type: "post",
  data: studentInfo,
  contentType: "application/json",
  url: "/Home/Submit",
  beforeSend: function () {
    // 禁用按钮防止重复提交
    $("#submit").attr({ disabled: "disabled" });
  },
  success: function (data) {
    if (data == "Success") {
      //清空输入框
      clearBox();
    }
  },
  complete: function () {
    $("#submit").removeAttr("disabled");
  },
  error: function (data) {
    console.info("error: " + data.responseText);
  }
});

토스트 효과 시뮬레이션
ajax가 서버에 데이터 목록 로드를 요청하면 로드하라는 메시지가 표시됩니다("로드 중입니다. 잠시 기다려 주십시오...").

$.ajax({
  type: "post",
  contentType: "application/json",
  url: "/Home/GetList",
  beforeSend: function () {
    $("loading").show();
  },
  success: function (data) {
    if (data == "Success") {
      // ...
    }
  },
  complete: function () {
    $("loading").hide();
  },
  error: function (data) {
    console.info("error: " + data.responseText);
  }
});

beforeSend 메소드는 서버에 요청을 보내기 전에 일부 처리 기능을 추가하는 데 사용됩니다. 이 기사가 beforeSend 메소드에 대한 모든 사람의 이해를 높이는 데 도움이 되기를 바랍니다.