JQuery ajax partial refresh example-JS Tutorial-php.cn

JQuery ajax partial refresh example

小云云

Release： 2018-05-14 15:18:45

Original

4996 people have browsed it

When we were developing, we often used javascript to implement partial refresh of the page. In this article, we will share with you JQuery ajax partial refresh, which has certain reference value. Interested friends can Refer to the

case:

JQuery ajax partial refresh example

##Description:

1. Click Login and the login dialog box will pop up

2. If the username and password are incorrect, an error message will be prompted
3. When the input information is correct, the login information will be refreshed. Display the user name and exit button
4. Click Exit to pop up the prompt message, then refresh the user name again after confirmation, and return to the position of the first picture

What kind of work do these simple operations require? Woolen cloth?

1. Load the login/(username-exit) page

2. Click the login link to open the login dialog box
3. When the login form is submitted, verify the information .
4. After the verification is passed, close the dialog box and refresh the page in 1 at the same time to display "Username-Exit"
5. When clicking to exit the a label, refresh the page in 1 again after logging out successfully and display "Login"

Load the login/(username-exit) page

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

Copy after login

1. Give p an id to index the page so that it can be positioned later. Go here.

2. Give a url attribute so that it can obtain the corresponding information from the jfinal server when the page is loaded. Of course, this is to obtain the page content for partial refresh.

// 有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() {
 }
 });
 }
 });

Copy after login

Locate p through the url, then obtain the url and prepare to initiate an ajax request.

Of course, don’t pay too much attention to the ajaxUrl method first, it will be explained further later.

Click the login connection to open the login dialog box

Copy code The code is as follows:

1. Add the attribute target to the dialog attribute. Of course, if you have not followed this series of tutorials, you can review it to see how to open a dialog box through the a tag and see how to open a modal dialog box.

2. Add the width attribute to set the width of the dialog box.

When the input information is correct, the login information is refreshed and the user name and exit button are displayed

Copy code The code is as follows:

1. The attributes of this form are very critical. Two parameters are added to the action: "callbackType=closeCurrent" and "rel=login_tip". The callbackType specifies that the dialog box should be closed after successful login, and rel specifies that the dialog box should be closed after successful login. Refreshed local object.

2. For validateCallback, you can refer to the actual login jump of jfinal and bootstrap, which has a detailed introduction.
3. Then for dialogAjaxDone, you need to focus on the following, please see the following content.

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;
 }
 }
 }
}

Copy after login

1. Here, please look at the string of code in "if (json.rel) {", where json.rel is used to obtain the series parameters on the a tag, and then the ajaxUrl method is called again to use Do a partial refresh.

At this point, we have to talk about the ajaxUrl method

(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 || &#39;GET&#39;,
 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);
 }
 }
 });
 },

 });

Copy after login

Through the ajax request, initiate a request to the jfinal end, and then receive the corresponding response. According to the response status, we will render the corresponding page The content is displayed in the local p.

The jfinal end is very simple

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

Copy after login

Rendering to the corresponding component page is OK.

Speaking of this, the partial refresh of the login is completed, as long as you pay attention to the corresponding method.

When you click to exit the a tag, refresh the page in 1 again after logging out successfully and display "Login"

For exiting, of course you can still refer to the actual logout of jfinal and bootstrap.

For the ajaxDone method, you can refer to the dialogAjaxDone method.

thinkphp+ajax partial refresh like

javascript - ajax partial refresh

php page partial refresh function Implementation method

The above is the detailed content of JQuery ajax partial refresh example. For more information, please follow other related articles on the PHP Chinese website!