웹 프론트엔드 JS 튜토리얼 보조 캡슐화 jquery ajax 방법의 예(그래픽 튜토리얼)

보조 캡슐화 jquery ajax 방법의 예(그래픽 튜토리얼)

May 22, 2018 am 10:32 AM
ajax jquery 캡슐화

Ajax의 정식 명칭은 Asynchronous JavaScript and XML입니다. 다음 글에서는 주로 jquery ajax의 2차 캡슐화 예시를 소개하고 있으니, 필요한 친구들은 함께 읽어보세요.

머리말

Ajax의 전체 이름은 Asynchronous JavaScript and XML입니다. Asynchronous javaScript and XML

AJax에는 다음과 같은 기술이 포함됩니다.

1. CSS와 XHTML을 사용하여 표현합니다.

2. 상호 작용 및 동적 표시를 위해 DOM 모델을 사용합니다.

3. XMLHttpRequest를 사용하여 서버와 비동기적으로 통신합니다. (Core)

4. javascript를 사용하여 바인딩하고 호출합니다.

프런트엔드에서 데이터를 처리할 때 Ajax를 통해 백엔드와 통신하는 것은 불가피합니다. Ajax는 XMLHttpRequest 객체를 통해 서버와 통신하기 위해 $.ajax 메서드를 캡슐화합니다. XMLHttpReaquest. $.ajax 메소드는 매우 실용적이고 사용이 매우 간단합니다. 쿼리 ajax의 두 번째 캡슐화는 express를 참조하여 데이터 처리에 미들웨어를 추가하고, Promise(Defferd) 객체를 반환하고, 콜백을 줄이고, Ajax를 보다 간결하고 우아하게 작성하는 것입니다. $.ajax 办法进行通信, $.ajax 办法实用性非常强,又非常简单易用。 本次二次封装 query ajax,参考 express 可以添加中间件处理数据,返回 Promise(Defferd) 对象,减少回调, 写 ajax 更加简洁、优雅。

$.ajax({
 url: url,
 data: data,
 dataType: 'json',
 type: 'get',
 success: new Function(){},
 error: new Function(){},
 .......
})
로그인 후 복사

大部分的时候我们只需要传入 url 和 data, 就可以获取到我们想到的数据了。

痛点

但是在项目中使用 $.ajax, 它还是有一些痛点的

就是现在基本所有项目的 ajax 返回的数据也是进行了二次封装,加入了后台在处理业务逻辑时的信息。

从返回 data, 变成 了 {code: 200, data:{}, err_msg:''}

如果每一个 ajax 请求回来都要判断 code 是否正确再进行业务逻辑处理或者报错提醒, 整个项目下来也太冗余了,

$.ajax({
 url: url,
 data: data,
 success: function(data){
 if(data.code == 200) {
  dosomething()
 } else {
 alert(data.err_msg);
 }
 }
})
로그인 후 복사

为了解决这个问题,我们用一个函数再次封装 $.ajax, 把这种正确与否判断再处理业务逻辑或者报错提醒提取出来做成公共的部分。

util.ajax = function(obj, successFn){
 $.ajax({
 url: obj.url || '/interface',
 data: obj.data || {},
 dataType: obj.dataType || 'json',
 type: obj.type || 'get',
 success: function(data){
  if (data.code != 200) {
  alert(data.err_msg);
  } else {
  successFn(data.data)
  }
 },
 error: function(err){
  alert(err)
 }
 })
}
로그인 후 복사

promise

util.ajax 代替 $.ajax

util.ajax = function(obj) {
 var deferred = $.Deferred();
 $.ajax({
  url: obj.url || '/interface',
  data: obj.data || {},
  dataType: obj.dataType || 'json',
  type: obj.type || 'get',
 }).success(function (data) {
  if (data.code != 200) {
   deferred.reject(data.err_msg);
  } else {
   deferred.resolve(data.data)
  }
 }).error(function (err) {
  deferred.reject('接口出错,请重试');
 })
 return deferred.fail(function (err) {
  alert(err)
 });
}


// 调用
var obj = {
 url: '/interface',
 data: {
  interface_name: 'name',
  interface_params: JSON.stringify({})
 }
};
util.ajax(obj)
 .done(function(data){
  dosomething(data)
 })
로그인 후 복사

대부분의 경우 원하는 데이터를 얻으려면 URL과 데이터만 전달하면 됩니다.

Pain points

하지만 프로젝트에서 $.ajax를 사용할 때 여전히 몇 가지 문제점이 있습니다.

즉, 이제 기본적으로 모든 프로젝트에서 ajax가 반환하는 데이터도 백그라운드에서 비즈니스 로직을 처리할 때 정보가 다시 캡슐화되었습니다.

반환된 데이터에서 {code: 200, data:{}, err_msg:''}

Ajax 요청이 올 때마다 코드가 맞는지 판단한 후 업무를 진행해야 합니다. 논리 처리 또는 오류 알림, 전체 프로젝트가 너무 중복됩니다.

이 문제를 해결하기 위해 우리는 $.ajax를 다시 캡슐화하는 함수를 사용하고 이전에 올바른지 여부를 판단합니다. 비즈니스 로직 처리 또는 오류 알림이 추출되어 공개 부분으로 만들어집니다. rrreee

promise

$.ajax 대신 util.ajax를 사용하여 비즈니스 오류를 줄이세요. 콜백을 사용하는 대신 약속을 사용하여 호출을 줄이고 콜백을 줄이고 코드를 더 명확하게 만들어 다시 개선해 보겠습니다. rrreee

🎜🎜Middleware🎜🎜🎜🎜이것은 공개적인 방법이지만 때로는 차별화 문제를 해결하기 위해 미들웨어를 도입하기 위해 Express를 참조합니다. 🎜rrreee🎜위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다. 🎜🎜관련 기사: 🎜🎜🎜🎜ajax🎜교차 도메인 문제에 대한 완벽한 솔루션🎜🎜🎜🎜JS의 Ajax 사용 기술에 대한 자세한 분석🎜🎜🎜🎜JQuery는 Ajax를 호출하여 이미지 로드🎜🎜

위 내용은 보조 캡슐화 jquery ajax 방법의 예(그래픽 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

PHP 및 Ajax: 자동 완성 제안 엔진 구축 PHP 및 Ajax: 자동 완성 제안 엔진 구축 Jun 02, 2024 pm 08:39 PM

PHP 및 Ajax를 사용하여 자동 완성 제안 엔진 구축: 서버측 스크립트: Ajax 요청을 처리하고 제안을 반환합니다(autocomplete.php). 클라이언트 스크립트: Ajax 요청을 보내고 제안을 표시합니다(autocomplete.js). 실제 사례: HTML 페이지에 스크립트를 포함하고 검색 입력 요소 식별자를 지정합니다.

TrendForce: Nvidia의 Blackwell 플랫폼 제품으로 TSMC의 CoWoS 생산 능력이 올해 150% 증가합니다. TrendForce: Nvidia의 Blackwell 플랫폼 제품으로 TSMC의 CoWoS 생산 능력이 올해 150% 증가합니다. Apr 17, 2024 pm 08:00 PM

4월 17일 이 사이트의 뉴스에 따르면 TrendForce는 최근 Nvidia의 새로운 Blackwell 플랫폼 제품에 대한 수요가 강세를 보이고 있으며, 이로 인해 TSMC의 전체 CoWoS 패키징 생산 능력이 2024년에 150% 이상 증가할 것으로 예상된다는 보고서를 발표했습니다. NVIDIA Blackwell의 새로운 플랫폼 제품에는 B 시리즈 GPU와 NVIDIA 자체 GraceArm CPU를 통합한 GB200 가속기 카드가 포함됩니다. TrendForce는 현재 공급망이 GB200에 대해 매우 낙관적이며, 출하량이 2025년에 100만 개를 초과할 것으로 예상되며 이는 Nvidia 고급 GPU의 40~50%를 차지할 것으로 확인했습니다. 엔비디아는 하반기에 GB200, B100 등의 제품을 출시할 계획이지만, 업스트림 웨이퍼 패키징에는 더욱 복잡한 제품을 채택해야 합니다.

jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? Feb 28, 2024 pm 03:12 PM

jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? jQuery에서 PUT 요청을 보내는 방법은 다른 유형의 요청을 보내는 것과 유사하지만 몇 가지 세부 사항과 매개 변수 설정에 주의해야 합니다. PUT 요청은 일반적으로 데이터베이스의 데이터 업데이트 또는 서버의 파일 업데이트와 같은 리소스를 업데이트하는 데 사용됩니다. 다음은 jQuery에서 PUT 요청 메소드를 사용하는 구체적인 코드 예제입니다. 먼저 jQuery 라이브러리 파일을 포함했는지 확인한 다음 $.ajax({u를 통해 PUT 요청을 보낼 수 있습니다.

Ajax를 사용하여 PHP 메소드에서 변수를 얻는 방법은 무엇입니까? Ajax를 사용하여 PHP 메소드에서 변수를 얻는 방법은 무엇입니까? Mar 09, 2024 pm 05:36 PM

Ajax를 사용하여 PHP 메소드에서 변수를 얻는 것은 웹 개발의 일반적인 시나리오입니다. Ajax를 통해 데이터를 새로 고치지 않고도 페이지를 동적으로 얻을 수 있습니다. 이 기사에서는 Ajax를 사용하여 PHP 메소드에서 변수를 가져오는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 Ajax 요청을 처리하고 필요한 변수를 반환하기 위해 PHP 파일을 작성해야 합니다. 다음은 간단한 PHP 파일 getData.php에 대한 샘플 코드입니다.

jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. Feb 28, 2024 pm 09:06 PM

제목: jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. 웹 개발에서는 페이지의 요소를 수정하고 조작해야 하는 경우가 많습니다. jQuery를 사용할 때 페이지에 있는 모든 태그의 텍스트 내용을 한 번에 수정해야 하는 경우가 있는데, 이는 시간과 에너지를 절약할 수 있습니다. 다음은 jQuery를 사용하여 페이지의 모든 태그 텍스트를 빠르게 수정하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 jQuery 라이브러리 파일을 도입하고 다음 코드가 페이지에 도입되었는지 확인해야 합니다. &lt

jQuery를 사용하여 모든 태그의 텍스트 내용 수정 jQuery를 사용하여 모든 태그의 텍스트 내용 수정 Feb 28, 2024 pm 05:42 PM

제목: jQuery를 사용하여 모든 태그의 텍스트 내용을 수정합니다. jQuery는 DOM 작업을 처리하는 데 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. 웹 개발을 하다 보면 페이지에 있는 링크 태그(태그)의 텍스트 내용을 수정해야 하는 경우가 종종 있습니다. 이 기사에서는 jQuery를 사용하여 이 목표를 달성하는 방법을 설명하고 구체적인 코드 예제를 제공합니다. 먼저 페이지에 jQuery 라이브러리를 도입해야 합니다. HTML 파일에 다음 코드를 추가합니다.

AMD 'Strix Halo' FP11 패키지 크기 노출: Intel LGA1700과 동일, Phoenix보다 60% 더 큼 AMD 'Strix Halo' FP11 패키지 크기 노출: Intel LGA1700과 동일, Phoenix보다 60% 더 큼 Jul 18, 2024 am 02:04 AM

이 웹사이트는 7월 9일에 AMD Zen5 아키텍처 "Strix" 시리즈 프로세서에 두 가지 패키징 솔루션이 있을 것이라고 보고했습니다. 더 작은 StrixPoint는 FP8 패키지를 사용하고 StrixHalo는 FP11 패키지를 사용합니다. 출처: videocardz 출처 @Olrak29_ 최근 밝혀진 바에 따르면 StrixHalo의 FP11 패키지 크기는 37.5mm*45mm(1687제곱밀리미터)로 Intel의 AlderLake 및 RaptorLake CPU의 LGA-1700 패키지 크기와 동일합니다. AMD의 최신 Phoenix APU는 25*40mm 크기의 FP8 패키징 솔루션을 사용합니다. 이는 StrixHalo의 F가

C++ 함수는 코드를 캡슐화하여 GUI 개발 효율성을 어떻게 향상합니까? C++ 함수는 코드를 캡슐화하여 GUI 개발 효율성을 어떻게 향상합니까? Apr 25, 2024 pm 12:27 PM

C++ 함수는 코드를 캡슐화함으로써 GUI 개발 효율성을 향상시킬 수 있습니다. 코드 캡슐화: 함수는 코드를 독립적인 단위로 그룹화하여 코드를 더 쉽게 이해하고 유지 관리할 수 있도록 합니다. 재사용성: 함수는 애플리케이션 전체에서 재사용할 수 있는 공통 기능을 생성하여 중복과 오류를 줄입니다. 간결한 코드: 캡슐화된 코드는 기본 논리를 간결하고 쉽게 읽고 디버깅할 수 있도록 만듭니다.

See all articles