JQuery Ajax 부분 새로 고침 예

우리는 개발할 때 javascript를 사용하여 부분 페이지 새로 고침을 구현했습니다. 이 기사에서는 특정 참조 값이 있는 JQuery ajax 부분 새로 고침을 공유합니다. 관심 있는 친구는

:

설명:

1. 로그인을 클릭하면 로그인 대화 상자가 나타납니다
2. 사용자 이름과 비밀번호가 올바르지 않으면 오류 메시지가 표시됩니다
3. 입력 정보가 ​​올바른지 확인하고 로그인 정보를 새로 고치고 사용자 이름과 종료 버튼을 표시합니다
4. 종료하려면 클릭하면 프롬프트 메시지가 나타납니다. 그런 다음 사용자 이름을 다시 확인하고 새로 고치면 첫 번째 사진 위치로 돌아갑니다

그렇다면 이러한 간단한 작업에는 어떤 작업이 필요할까요?

1. 로그인/(사용자 이름-로그아웃) 페이지를 로드합니다.
2. 로그인 링크를 클릭하여 로그인 대화 상자를 엽니다.
3. 로그인 양식이 제출되면 정보를 확인합니다.
4. 확인이 완료되면 대화 상자를 닫고 동시에 1에서 페이지를 새로 고쳐 "사용자 이름-종료"를 표시합니다.
5 레이블을 종료하기 위해 클릭하면 로그인 후 1에서 다시 페이지를 새로 고칩니다. 성공적으로 출력되고 "로그인"이 표시됩니다.

로그인/(사용자 이름 종료) 페이지를 로드

<p id="login_tip" url="${ctx}/mem/initLoginTip"></p>

1. 나중에 여기에서 찾을 수 있도록 페이지 색인 생성에 사용될 ID를 제공하세요.
2. 페이지가 로드될 때 jfinal 서버에서 해당 정보를 얻을 수 있도록 url 속성을 제공합니다. 물론 부분 새로 고침을 위한 페이지 콘텐츠를 얻기 위한 것입니다.

// 有url的p主动请求服务端获取数据
 $("p[url]", $p).each(function() {
 var $this = $(this);
 var url = $this.attr("url");
 if (url) {
 $this.ajaxUrl({
 type : "POST",
 url : url,
 callback : function() {
 }
 });
 }
 });

URL을 통해 p를 찾은 다음 URL을 가져와 Ajax 요청을 시작할 준비를 합니다.

물론, ajaxUrl 메소드에 너무 많은 관심을 기울이지 마세요. 나중에 더 자세히 설명하겠습니다.

로그인 연결을 클릭하면 로그인 대화 상자가 열립니다

코드 복사 코드는 다음과 같습니다.

Login

1. 대화 상자 속성에 속성 대상을 추가합니다. 물론 이 튜토리얼 시리즈를 따르지 않았다면 a 태그를 통해 대화 상자를 여는 방법을 검토하고 모달 대화 상자를 여는 방법을 살펴보겠습니다.
2. 대화 상자의 너비를 설정하려면 너비 속성을 추가하세요.

입력된 정보가 정확하면 로그인 정보가 새로고침되고 사용자 이름과 종료 버튼이 표시됩니다

코드를 복사하세요 코드는 다음과 같습니다

1 이 양식의 속성은 매우 중요합니다." callbackType=closeCurrent"가 작업에 추가됩니다. , "rel=login_tip", callbackType은 로그인 성공 후 대화 상자를 닫아야 함을 지정하고 rel은 대화 상자를 닫은 후 새로 고쳐지는 로컬 개체를 지정합니다.
2.validateCallback의 경우 자세한 소개가 있는 jfinal 및 bootstrap의 실제 로그인 점프를 참조할 수 있습니다.
3. 그러면DialogAjaxDone에 대해서는 다음 사항에 집중해야 합니다. 다음 내용을 참조하세요.

function dialogAjaxDone(json) {
 YUNM.ajaxDone(json);
 if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok || json[YUNM.keys.statusCode] == YUNM.statusCode.info) {
 if (json.rel) {// 指定对应的p进行数据加载
 var url = json.forwardUrl, options = {
 elementId : json.rel
 };
 var op = $.extend({
 data : {},
 elementId : "",
 callback : null
 }, options);

 var $panel = $("#" + op.elementId);

 if (!url) {
 url = $panel.attr("url");
 }

 if (url) {
 $panel.ajaxUrl({
 type : "POST",
 url : url,
 data : op.data,
 callback : function(response) {
 if ($.isFunction(op.callback))
 op.callback(response);
 }
 });
 }
 }

 if ("closeCurrent" == json.callbackType) {
 close_pop();
 } else if ("closeCurrentThenForward" == json.callbackType) {
 close_pop();
 if (json.forwardUrl) {
 location.href = common.ctx + json.forwardUrl;
 return;
 }
 }
 }
}

1 여기에서 "if (json.rel) {"의 코드 문자열을 살펴보세요. 여기서 json.rel은 a 태그의 계열 매개변수를 얻는 데 사용되며, 그런 다음 ajaxUrl 메서드가 다시 호출됩니다. 부분 새로 고침.

이제 ajaxUrl 메소드에 대해 이야기해야 합니다

(function($){
 // DWZ set regional
 $.setRegional = function(key, value){
 if (!$.regional) $.regional = {};
 $.regional[key] = value;
 };

 $.fn.extend({
 initUI: function(){
 return this.each(function(){
 if($.isFunction(initUI)) initUI(this);
 });
 },
 loadUrl: function(url,data,callback){
 $(this).ajaxUrl({url:url, data:data, callback:callback});
 },
 ajaxUrl: function(op){
 var $this = $(this);

 $this.trigger(YUNM.eventType.pageClear);

 $.ajax({
 type: op.type || 'GET',
 url: op.url,
 data: op.data,
 cache: false,
 success: function(response){
 var json = YUNM.jsonEval(response);

 if (json[YUNM.keys.statusCode]==YUNM.statusCode.error){
 if (json[YUNM.keys.message]) $.showErr(json[YUNM.keys.message]);
 } else {
 $this.html(response).initUI();
 if ($.isFunction(op.callback)) op.callback(response);
 }
 },
 error: YUNM.ajaxError,
 statusCode: {
 503: function(xhr, ajaxOptions, thrownError) {
 $.showErr("服务器当前负载过大或者正在维护!" || thrownError);
 }
 }
 });
 },

 });

ajax 요청을 통해 jfinal end까지 요청을 시작한 다음 해당 응답을 받습니다. 응답 상태에 따라 해당 페이지 렌더링 콘텐츠를 표시합니다. 로컬 p로.

jfinal 끝은 매우 간단합니다.

public void initLoginTip() {
 logger.info("初始化登录/退出页面");
 render("login_tip.jsp");
 }

해당 컴포넌트 페이지로 렌더링해도 괜찮습니다.

그러고보니, 해당 방법에 주의하시면 로그인 부분 새로고침이 완료됩니다.

a 태그를 종료하기 위해 클릭하면 로그아웃에 성공한 후 1에서 다시 페이지를 새로 고치면 "로그인"이 표시됩니다.

종료하려면 물론 jfinal 및 bootstrap의 실제 로그아웃을 참조할 수 있습니다.

ajaxDone 메소드는DialogAjaxDone 메소드를 참고하시면 됩니다.

thinkphp+ajax 부분 새로 고침 like

javascript - ajax 부분 새로 고침

php 페이지 부분 새로 고침 기능 구현 방법

위 내용은 JQuery Ajax 부분 새로 고침 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!