집 > 기사 > 웹 프론트엔드 > jQuery에서 일반적으로 사용되는 Ajax 기능에 대한 자세한 설명

jQuery에서 일반적으로 사용되는 Ajax 기능에 대한 자세한 설명

小云云원래의: 2018-01-01 10:23:381319검색

AJAX는 전체 웹페이지를 다시 로드하지 않고도 웹페이지의 일부를 업데이트할 수 있는 기술입니다. 이 글을 통해 jQuery의 Ajax와 관련된 몇 가지 공통 기능을 공유하겠습니다. 필요한 친구들이 참고하면 도움이 될 것입니다.

AJAX는 전체 웹페이지를 다시 로드하지 않고도 웹페이지의 일부를 업데이트할 수 있는 기술입니다.

AJAX란 무엇인가요?

AJAX = 비동기 JavaScript 및 XML.

AJAX는 빠르고 동적인 웹 페이지를 만드는 기술입니다.

AJAX를 사용하면 백그라운드에서 서버와 소량의 데이터를 교환하여 웹페이지를 비동기적으로 업데이트할 수 있습니다. 이는 전체 페이지를 다시 로드하지 않고도 웹페이지의 일부를 업데이트할 수 있음을 의미합니다.

AJAX를 사용하지 않는 기존 웹페이지에서는 콘텐츠를 업데이트해야 하는 경우 전체 웹페이지를 다시 로드해야 합니다.

AJAX를 활용한 적용사례는 Sina Weibo, Google Maps, Kaixin.com 등 다양합니다.

2: 전통적인 Ajax는 너무 번거롭습니다. jquer는 ajax에서 일반적으로 사용되는 몇 가지 간단한 기능을 캡슐화합니다.

a: $.ajax() 메소드:

jsp 페이지 코드:

<head>
  <title>Ajax验证</title>
  <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $("[name='userName']").blur(function () {     
        $.ajax({
          type: "post",
          url: "/TestServlet",
          data:{action:"login"},     //data 传递的参数一般都是key：“ value” 类型的 value一定要加引号 我亲身体验 那种找不到错的感觉
          // dataType:'Text',      //servers 返回的格式 也可以是gjon
          success: function (data) {
            if (data == "success") {
              alert(data);
              $("#myspan").html(data);
            }
          },
          error: function () {      //这个用的比较少
          }
        })
      })
    })
  </script>
</head>
<body>
   姓名： <input name="userName" type="text"><span id="myspan"></span>
   密码: <input name="password" type="text">
</body>

서블릿 배경 코드:

public class TestServlet extends HttpServlet {
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String name = request.getParameter("action");
    System.out.println(name);
    if(name.equals("login")){
      response.getWriter().write("success");  //返回回掉函数的参数
    }else{
      response.getWriter().write("file");
    }
  }

b: $.get(), $.post() 및 $.getJson 메소드는 모두 $.ajax입니다. () 메소드의 단순화된 버전으로 사용법은 거의 동일하며 type

$.post("/TestServlet",
         {"uname":$('[name=uname]').val()},
         function (data) {
           alert(data);
         });

c: $.load()

$("#msg").load(     //可以直接拿到文本框 的值
         "/TestServlet","action="+$('[name="userName"]').val()
         );
//后台可以直接 根据request.getParameter（）拿到参数的值

d:$(selector).serializeArray() 및 $(selector)가 하나 더 적습니다. serialize()

 //这种方法 可以直接 获得form表单的name属性值，作为data的传参
 var data1 = $("#form1").serializeArray(); //自动将form表单封装成json
           $.each(data1,function (i,dom) {
             alert(dom.name+"\r\n"+dom.value);
           });
           var data2=$("#form1").serialize();
           alert(data2);

e: 데이터 매개변수로

 var data2=$("#form1").serialize();
           $.getJSON("/TestServlet",data2, function (data) {
              alert(data);
           });

jQuery에서 일반적으로 사용되는 Ajax 기능에 대한 자세한 설명

관련 기사