Ajax에서 일반적으로 사용되는 함수-JS 튜토리얼-php.cn

Ajax에서 일반적으로 사용되는 함수

巴扎黑

풀어 주다： 2017-07-18 16:37:37

원래의

1616명이 탐색했습니다.

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?1.1.11"></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() 메서드의 단순화된 버전이며 한 가지 유형을 제외하고 사용법은 거의 동일합니다

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

로그인 후 복사

 $("#msg").load(           "/TestServlet","action="+$('[name="userName"]'

로그인 후 복사

d: $ (ESelector

) .Serializearray () and $ (

Selector

) .Serialize ()

// 이 메소드는 FORM 폼의 NAME 속성 값을 직접 얻을 수 있습니다 , Data e의 전기: 데이터 매개변수

 var data1 = $("#form1").serializeArray(); //自动将form表单封装成json                     $.each(data1,function (i,dom) {
                         alert(dom.name+"\r\n"+dom.value);
                     });

                     var data2=$("#form1").serialize();
                     alert(data2);

로그인 후 복사

jQuery에서 ajax의 4가지 일반적인 요청 메서드:

1.$.ajax()는 생성된 XMLHttpRequest 객체를 반환합니다.

$.ajax()에는 각 구성 및 콜백 함수 정보를 포함하는 매개변수 키/값 객체라는 하나의 매개변수만 있습니다. dataType 옵션이 지정된 경우 서버가 올바른 MIME 정보를 반환하는지 확인하세요(예: xml이 "text/xml"을 반환함).

예:

데이터를 서버에 저장하고 성공하면 정보를 표시합니다.

$.ajax({ type: "post", dataType: "html", url: '/Resources/GetList.ashx', data: dataurl, Success: function (data) 　{

if (data != "") {

$("#pager").pager({

pagenumber: 페이지 번호, 페이지 수: data.split("$$")[1],

buttonClickCallback: PageClick });

$("#anhtml").html( data.split("$$")[0]);

}
}
});
2. 원격 HTTP GET 요청을 통해 정보를 로드합니다.
복잡한 $.ajax를 대체하는 간단한 GET 요청 기능입니다. 요청이 성공하면 콜백 함수를 호출할 수 있습니다
. 오류 발생 시 함수를 실행해야 하는 경우 $.ajax를 사용하세요. 예:
$.get("test.cgi", { 이름: "John", 시간: "오후 2시" },
function(data){
alert("로드된 데이터: " + data);
});
3. 원격 HTTP POST 요청을 통해 정보를 로드합니다. 이는 복잡한 $.ajax를 대체하는 간단한 POST 요청 함수입니다.
요청이 성공하면 콜백 함수를 호출할 수 있습니다. 오류 발생 시 함수를 실행해야 하는 경우 $.ajax를 사용하세요.
예:
$.post("/Resources/addfriend.ashx", { "fid": fids, "fname": fnames, "tuid": tuids, "tuname": tunames },
함수(데이터) {
if (data == "ok") {
alert("추가되었습니다!");
}
}
)
4. HTTP GET 요청을 통해 JSON 데이터를 로드합니다.
예:
$.getJSON("api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&
jsoncallback=?, 앞에 http://" 추가, 함수(데이터){
$.each(data.items, function(i,item){
$("").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});

　