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 を p に与えます。
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 メソッドについては、後で詳しく説明しますので、あまり注意を払わないでください。

ログイン接続をクリックしてログイン ダイアログ ボックスを開きます

コードをコピーします

コードは次のとおりです:

ログイン1. 属性ターゲットをダイアログ属性に追加します。もちろん、この一連のチュートリアルに従わなかった場合は、 a タグを使用してダイアログ ボックスを開く方法を確認し、モーダル ダイアログ ボックスを開く方法を確認してください。

2. width 属性を追加して、ダイアログ ボックスの幅を設定します。

入力した情報が正しい場合、ログイン情報が更新され、ユーザー名と終了ボタンが表示されます

コードをコピーします
コードは次のとおりです:

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 エンドへのリクエストを開始し、応答ステータスに従って、対応するページのレンダリング コンテンツを表示します。ローカルpで。

jfinalの終わりはとてもシンプルです

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

対応するコンポーネントページへのレンダリングはOKです。

そういえば、対応する方法に注意していれば、ログインの部分更新は完了です。

aタグをクリックして終了すると、ログアウト成功後、再度1のページを更新すると「ログイン」と表示されます

終了については、もちろんjfinalとbootstrapの実際のログアウトを参照することができます。

ajaxDone メソッドについては、dialogAjaxDone メソッドを参照できます。

thinkphp+ajax部分更新のような

javascript - ajax部分更新

PHPページの部分更新機能の実装方法

以上がJQuery ajax 部分更新の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。