Ajax에서 일반적으로 사용되는 함수
- 巴扎黑원래의
- 2017-07-18 16:37:371581검색
1:
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"]'
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);
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],}
}
});
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;
});
});
위 내용은 Ajax에서 일반적으로 사용되는 함수의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!