Ajax를 구체적으로 사용하는 방법은 무엇입니까? Ajax를 사용한 특정 작업 소개

이 글에서는 주로 ajax의 구체적인 사용법을 다루고 있으며, 예시를 통해 자세히 설명하고 있습니다. 이제 이 글을 함께 읽어볼까요

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

프런트에서는 일부 페이지 효과나 검증 등을 위해 모두 JavaScript 언어를 사용해 완성하는데, 그것도 우리의 Java 코드와 비슷합니다. 가장 기본적인 프론트엔드 언어인 JQuery는 js 코드를 캡슐화하여 프론트엔드 코드 작성을 용이하게 하며, 브라우저 호환성 문제를 해결하는 데에도 매우 큰 이점이 있습니다. 이것이 매우 중요한 이유 중 하나입니다. 우리가 그것을 사용하도록.

이제 사용자의 요구를 충족시키기 위해 Ajax(Asynchronous Javascript + XML)Asynchronous 새로 고침 비교할 수 없는 효과가 있습니다. 과거에는 Ajax 작업을 작성하려면 항상 JDBC 코드와 같은 몇 가지 필수 단계를 수행해야 했습니다.

AJAX - 핵심 XMLHttpRequest 객체 #🎜🎜 #, JQuery는 Ajax 비동기 작업도 캡슐화합니다. 다음은 몇 가지 일반적인 방법입니다. $.ajax, $.post, $.get, $.getJSON.

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

url //데이터 제출 경로 #🎜 🎜#

#🎜 🎜# async // 비동기 새로 고침 지원 여부, 기본값은 true

data 서버에서 반환하는 데이터 유형(예: xml, String) , Json 등 오류 //요청 실패 후 콜백 함수

}

#🎜 🎜#

$.ajax(configObj);//$.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 추가 캡슐화를 제공하고 매개변수를 줄이며 작업을 단순화하지만 적용 범위는 다음과 같습니다. 더 작습니다. $.post는 데이터 제출 방법을 단순화하고 POST를 통해서만 제출할 수 있습니다. 서버에는 동기식이 아닌 비동기식으로만 접근할 수 있으며, 오류 처리를 수행할 수 없습니다. 이러한 상황에서는 이 기능을 사용하여 프로그래밍을 용이하게 할 수 있으며, 메서드, 비동기 등과 같은 주요 매개변수는 기본적으로 설정되어 있으며 변경할 수 없습니다. 예시는 다시 소개하지 않겠습니다.

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

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

콜백: 전송 성공 시 콜백 함수입니다.

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

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

                                                      $.getJSON, 이는 추가 캡슐화입니다. 즉, Json의 반환 데이터 유형에서 작동합니다. 우리가 설정해야 하는 매개변수는 url, [data], [callback] 세 개뿐입니다. 매우 간단합니다.

(자세한 내용을 보시려면 PHP 중국어 홈페이지 AJAX 개발 매뉴얼

칼럼을 참고하세요.)

사실 $.ajax 메소드만 알면 나머지는 다 사용 가능합니다. 똑같고 실제로는 매우 간단합니다.

그런데 여기서 더 문제가 되는 또 다른 문제가 있습니다. 즉, 페이지 데이터의 양이 상대적으로 클 경우 어떻게 해야 할까요? 정규 형식을 처리할 때 Struts2 프레임워크를 사용하여 도메인 중심 모드를 통해 자동으로 캡슐화합니다. 그러면 Ajax를 통해 캡슐화하는 방법은 무엇입니까? 여기서 JQuery에는 Jquery Form이라는 플러그인이 있습니다. 이 js 파일을 도입하면 양식 양식을 모방하여 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  
    };  
  
     $(&#39;#orgForm&#39;).ajaxForm(options); //通过Jquery.Form中的ajaxForm方法进行提交  
   });  
</span>

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

本篇文章到这就结束了（想看更多就到PHP中文网AJAX使用手册栏目中学习），有问题的可以在下方留言提问。

위 내용은 Ajax를 구체적으로 사용하는 방법은 무엇입니까? Ajax를 사용한 특정 작업 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!