집 > 기사 > 웹 프론트엔드 > JQuery에서 Ajax 작업 공유의 전체 예제

JQuery에서 Ajax 작업 공유의 전체 예제

小云云원래의: 2018-01-23 13:18:292497검색

이 글은 주로 JQuery의 Ajax 작업 전체 예제를 소개합니다. 매우 훌륭하고 참고할 가치가 있습니다. 필요한 친구가 모두 참고할 수 있기를 바랍니다.

Java 소프트웨어 개발에서는 SSH 등의 다양한 프레임워크를 통해 백그라운드에서 코드를 캡슐화하여 Java 코드 작성을 용이하게 할 수 있습니다. 예를 들어 Struts 및 SpringMVC는 프런트 데스크에서 프로세스를 캡슐화하고 제어합니다. 이를 달성하려면 몇 가지 간단한 구성만 하면 됩니다. Spring은 다양한 객체 관리를 캡슐화하고 AOP 프로그래밍을 제공하므로 최대 절전 모드와 IBatis는 JDBC 코드를 캡슐화하므로 반복적이고 복잡하게 작성할 필요가 없습니다. 매번 JDBC 코드. 면 프런트 데스크에서는 일부 효과, 검증 등을 JavaScript 언어를 통해 수행하지만 이는 우리의 Java 코드와 비슷하며 프런트 엔드 코드 작성을 용이하게 하며 측면에서도 매우 큰 이점이 있습니다. 브라우저 호환성 문제를 해결하는 것은 우리가 브라우저를 사용하는 것이 매우 중요한 이유 중 하나입니다. ㅋㅋ Ajax(Asynchronous Javascript + XML) 비동기 새로 고침은 비교할 수 없는 역할을 합니다. 과거에는 Ajax 작업을 작성하려면 항상 JDBC 코드와 같은 몇 가지 필수 단계를 수행해야 했습니다.

AJAX - 핵심 XMLHttpRequest 객체이며 JQuery도 Ajax를 캡슐화합니다. 비동기 작업은 다음과 같습니다. $.ajax, $.post, $.get, $.getJSON.

1. $.ajax, JQuery의 ajax 캡슐화의 가장 기본적인 단계입니다. 이 함수를 사용하면 비동기 통신의 모든 기능을 완성할 수 있습니다. 즉, 이 방법을 사용하여 어떤 상황에서도 비동기 새로 고침 작업을 수행할 수 있습니다. 하지만 매개변수가 너무 많아 때로는 약간 문제가 될 수도 있습니다. 일반적으로 사용되는 매개변수를 살펴보세요.

var configObj = {
  method //数据的提交方式：get和post
  url //数据的提交路劲
  async //是否支持异步刷新，默认是true
  data //需要提交的数据
  dataType //服务器返回数据的类型，例如xml,String,Json等
  success //请求成功后的回调函数
  error //请求失败后的回调函数
 }

$.ajax(configObj);//$.ajax 함수를 통해 호출됩니다. ㅋㅋㅋ 2009년을 벗어나 2017년부터 2020년까지 작업을 단순화하지만 적용 범위는 더 작습니다. $.post는 데이터 제출 방법을 단순화하고 POST를 통해서만 제출할 수 있습니다. 서버에는 동기식이 아닌 비동기식으로만 접근할 수 있으며, 오류 처리를 수행할 수 없습니다. 이러한 상황에서는 이 기능을 사용하여 프로그래밍을 용이하게 할 수 있으며, 메서드, 비동기 등과 같은 주요 매개변수는 기본적으로 설정되어 있으며 변경할 수 없습니다. 예시는 다시 소개하지 않겠습니다.

url: 요청 주소를 보냅니다.

data: 전송할 키/값 매개변수입니다.

콜백: 전송 성공 시 콜백 기능입니다.

type: 콘텐츠 형식, xml, html, script, json, text,_default를 반환합니다. E e, $.Get은 $.post와 마찬가지로 GET 방식의 제출 데이터로 캡슐화되었습니다. 이는 비동기식 새로 고침 방식을 해결하기 위해 GET에서만 사용할 수 있습니다. 위에. 여기서는 더 이상 데모를 하지 않습니다. 예를 들어 $ .getjson은 추가 패키징입니다. 즉, 반환 데이터 유형을 JSON으로 작동합니다. 우리가 설정해야 하는 매개변수는 url, [data], [callback] 세 개뿐입니다. 매우 간단합니다.

실제로 $.ajax 방법을 알고 나면 다른 모든 방법을 사용할 수 있습니다. 실제로는 매우 간단합니다.

그런데 여기에 더 문제가 되는 또 다른 문제가 있습니다. 즉, 페이지의 데이터 양이 상대적으로 많은 경우 어떻게 해야 할까요? 정규 형식을 처리할 때 Struts2 프레임워크를 사용하여 도메인 중심 모드를 통해 자동으로 캡슐화합니다. 그러면 Ajax를 통해 캡슐화하는 방법은 무엇입니까? 여기서 JQuery에는 Jquery Form이라는 플러그인이 있습니다. 이 js 파일을 도입하면 양식을 모방하여 Struts2의 도메인 기반 모드를 지원하고 자동 데이터 캡슐화를 수행할 수 있습니다. 사용법은 $.ajax와 유사합니다. 다음은 사용자를 저장하는 프런트 엔드 코드입니다.

<span style="font-size:18px;">   // 删除 
    $.ajax({ 
     type : "POST", //提交方式 
     url : "${pageContext.request.contextPath}/org/doDelete.action",//路径 
     data : { 
      "org.id" : "${org.id}" 
     },//数据，这里使用的是Json格式进行传输 
     success : function(result) {//返回数据根据结果进行相应的处理 
      if ( result.success ) { 
       $("#tipMsg").text("删除数据成功"); 
       tree.deleteItem("${org.id}", true); 
      } else { 
       $("#tipMsg").text("删除数据失败"); 
      } 
     } 
    }); 
</span>

이렇게 하면 데이터를 캡슐화할 필요가 없습니다. Ajax 작업을 크게 단순화하여 비동기식 새로 고침 작업을 수행합니다. 정리하면 JQuery에서 ajax 연산을 많이 사용하는 것 같습니다. 여전히 폼 처리와 매우 유사하지만 구현되는 기능이 다릅니다. 프로그래밍을 배우는 것은 실제로 데이터를 전송하고 처리하는 방법, 프론트 데스크에서 데이터를 가져와 해당 처리를 위해 서버로 전송한 다음 해당 디스플레이에 반환하는 방법을 배우는 것입니다. 소프트웨어가 완성되었습니다. 여전히 매우 흥미로운 느낌입니다.

JQuery에서 Ajax 작업 공유의 전체 예제

관련 기사