집 > 기사 > 웹 프론트엔드 > JQuery를 사용하여 Ajax 작동(대소문자 포함)

JQuery를 사용하여 Ajax 작동(대소문자 포함)

php中世界最好的语言원래의: 2018-04-23 15:33:162017검색

이번에는 JQuery를 사용하여 Ajax를 운용하는 방법(케이스 포함)을 알려드리겠습니다. JQuery를 사용하여 Ajax를 운용할 때 주의사항은 무엇인가요? 다음은 실제 사례입니다.

Java 소프트웨어 개발에서는 SSH 등의 다양한 프레임워크를 통해 백그라운드에서 코드를 캡슐화하여 Java 코드 작성을 용이하게 할 수 있습니다. 예를 들어 Struts 및 SpringMVC는 프런트 데스크에서 프로세스를 캡슐화하고 제어합니다. 이를 달성하기 위해 몇 가지 간단한 구성만 하면 됩니다. Spring은 다양한 개체의 관리를 캡슐화하고 AOP 프로그래밍을 제공하므로 최대 절전 모드 및 IBatis는 JDBC 코드를 캡슐화하므로 반복적이고 복잡하게 작성할 필요가 없습니다. 매번 JDBC 코드. + 페이지, 검증 등에 대한 일부 효과는 모두

JavaScript

언어를 통해 이루어지지만 이는 우리의 Java 코드와 동일하며 가장 기본적인 프런트엔드 언어이며 jQuery는 js의 가장 기본적인 언어 코드 캡슐화는 프런트엔드 코드 작성을 용이하게 하며 브라우저 호환성 문제를 해결하는 데에도 매우 큰 이점을 제공합니다. 이는 코드 캡슐화를 사용하는 것이 매우 중요한 이유 중 하나입니다. ㅋㅋㅋ 그러나 이제 사용자의 요구를 충족하기 위해 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 함수를 통해 호출됩니다. ㅋㅋㅋ 2016~2007년부터 2016년까지 10개 중

10개 중 하나이지만 적용 범위는 더 작습니다. $.post는 데이터 제출 방법을 단순화하고 POST를 통해서만 제출할 수 있습니다. 서버에는 동기식이 아닌 비동기식으로만 접근이 가능하며

오류 처리

가 불가능합니다. 이러한 상황에서는 이 기능을 사용하여 프로그래밍을 용이하게 할 수 있으며, 메서드, 비동기 등과 같은 주요 매개변수는 기본적으로 설정되어 있으며 변경할 수 없습니다. 예시는 다시 소개하지 않겠습니다.

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

data: 전송할 키/값 매개변수입니다. 콜백: 전송 성공 시 콜백 기능입니다.

type: 콘텐츠 형식, xml, html, script, json, text,_default를 반환합니다.

3, $.get, $.post와 마찬가지로 이 함수는 get 메소드의 제출된 데이터를 캡슐화하며, get 제출된 데이터의 비동기 새로 고침을 해결하는 데에만 사용할 수 있습니다. 사용 방법은 위와 유사합니다. 여기서는 더 이상 데모를 하지 않습니다.

4. $.getJSON은 추가 캡슐화입니다. 즉, 반환된

데이터 유형

에서 Json으로 작동합니다. 우리가 설정해야 하는 매개변수는 url, [data], [callback] 세 개뿐입니다. 매우 간단합니다. A 실제로는 $.ajax 방식을 사용하게 되는데, 모두 동일하지만 매우 간단합니다.

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

Form

을 모방하여 Struts2의 도메인 기반 모드를 지원하고 자동 데이터 캡슐화를 수행할 수 있습니다. 사용법은 $.ajax와 유사합니다. 실제 예를 살펴보겠습니다. 다음은 사용자를 저장하는 프런트엔드 코드입니다.

<span style="font-size:18px;"> $(function(){ 
  var options = { 
   beforeSubmit : function() {//处理以前需要做的功能 
    $("tipMsg").text("数据正在保存，请稍候..."); 
    $("#insertBtn").attr("disabled", true); 
   }, 
   success : function(result) {//返回成功以后需要的回调函数 
    if ( result.success ) { 
     $("#tipMsg").text("机构保存成功"); 
          //这里是对应的一棵树，后边会介绍到， 
     // 控制树形组件，增加新的节点 
     var tree = window.parent.treeFrame.tree; 
     tree.insertNewChild("${org.id}", result.id, result.name); 
    } else { 
     $("#tipMsg").text("机构保存失败"); 
    } 
    // 启用保存按钮 
    $("#insertBtn").attr("disabled", false); 
   }, 
   clearForm : true 
  }; 
  $('#orgForm').ajaxForm(options); //通过Jquery.Form中的ajaxForm方法进行提交 
 }); 
</span>

这样我们就不用再进行数据data的封装处理，大大简化了我们ajax的操作这样异步刷新的操作。综上为JQuery中ajax的操作，感觉使用多了，和form表单的处理还是非常相似的，只不过实现的功能不一样罢了。学习编程，其实就是学习对数据的流转处理，如何从前台获取，传输到服务器进行相应的处理，然后返回，进行相关的显示，把这个流程通过一些技术实现，就完成了软件的开发，感觉还是非常有意思的。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

JQuery를 사용하여 Ajax 작동(대소문자 포함)

관련 기사