ホームページ > 記事 > ウェブフロントエンド > JQuery ajax 部分更新の例
私たちが開発していたとき、私たちは javascript を使用してページの部分更新を実装することがよくありました。この記事では、特定の参考値を持つ JQuery ajax の部分更新を共有します。興味のある方は参考にしてください。
1. [ログイン]をクリックすると、ログインダイアログボックスが表示されます2. ユーザー名とパスワードが間違っている場合は、エラーメッセージが表示されます
4. クリックして終了すると、プロンプト メッセージがポップアップ表示され、ユーザー名を再度確認して更新し、最初の画像の位置に戻ります
では、これらの単純な操作にはどのような作業が必要なのでしょうか?
1. ログイン/(ユーザー名-ログアウト) ページをロードします。
2. ログイン リンクをクリックしてログイン ダイアログ ボックスを開きます。
3. ログイン フォームが送信されたら、情報を確認します。
4. 認証が成功したら、ダイアログボックスを閉じ、同時に 1 のページを更新して、「ユーザー名 - 終了」を表示します。
<p id="login_tip" url="${ctx}/mem/initLoginTip"></p>
// 有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 サイトの他の関連記事を参照してください。