보조 캡슐화 jquery ajax 방법의 예(그래픽 튜토리얼)
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) })
Pain points
하지만 프로젝트에서$.ajax
를 사용할 때 여전히 몇 가지 문제점이 있습니다.즉, 이제 기본적으로 모든 프로젝트에서 ajax가 반환하는 데이터도 백그라운드에서 비즈니스 로직을 처리할 때 정보가 다시 캡슐화되었습니다. 반환된 데이터에서 {code: 200, data:{}, err_msg:''}

핫 AI 도구

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

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

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

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

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

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

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

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

뜨거운 주제











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

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

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

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

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

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