ホームページ  >  記事  >  ウェブフロントエンド  >  JQuery ajax 部分更新の例

JQuery ajax 部分更新の例

小云云
小云云オリジナル
2018-05-14 15:18:454983ブラウズ

私たちが開発していたとき、私たちは javascript を使用してページの部分更新を実装することがよくありました。この記事では、特定の参考値を持つ JQuery ajax の部分更新を共有します。興味のある方は参考にしてください。

JQuery ajax 部分更新の例
JQuery ajax 部分更新の例
JQuery ajax 部分更新の例
1. [ログイン]をクリックすると、ログインダイアログボックスが表示されますJQuery ajax 部分更新の例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 属性を追加して、ダイアログ ボックスの幅を設定します。

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

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

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。