1

私は単一ページの Web アプリケーションに取り組んでいます。ログイン用に次のコードを追加しました。

$('#loginLink, #registerLink')
   .click(function () {
      var $link = $(this);
      var href = $link.attr('data-href');
      $('#article').load(href);
   }
   return false;
});

これは機能し、#article セクションに次の HTML が入力されます。この質問のコードの一部を取り除いたことに注意してください。

<form action="/User/Account/Login" method="post" novalidate="novalidate">
...
note there's client side validation on the page but I just don't show it here
...
<ol>
   <li>
      <input id="UserName" name="UserName" type="text" value="">
   </li>
</ol>
<input type="submit" value="Log in">
</form>

送信をクリックするとフォームが表示されると、ブラウザにリクエストが送信され、新しいページが返されます。送信アクションを引き続き保持し (自分のページにあるクライアント側の検証用)、送信の結果を #article セクションに再び表示されるページに戻す方法はありますか?

4

2 に答える 2

1

event.preventDefault()フォームの送信と Web ページ全体のリロードを回避したいと考えています。この Fiddleを参照してください。

于 2012-12-30T14:45:37.503 に答える
1

送信アクションを引き続き保持し (自分のページにあるクライアント側の検証用)、送信の結果を #article セクションに再び表示されるページに戻す方法はありますか?

これを正しく理解しているかどうかはわかりませんが、送信時にページを更新せずに記事のコンテンツを読み込みたい場合は、submitイベントにバインドして、次のような ajax 呼び出しを実行 できます。

on以下の例では、jQuery 1.7 でのみ追加されたものを使用しています。jQuery 1.6.x 以下を使用している場合は、bind代わりに使用できます。

$("form").on("submit", function() {
    var $form = $(this);

    // if there are validation errors do not continue.
    if(!$form.valid()){
        return false;
    }

    // get the form data
    var myData = $form.serialize();

    // get the url to post to from the form's action attribute.
    var myUrl = $form.attr("action");

    // execute the post
    $.ajax({
        url: myUrl,
        data: myData 
        success: function(data) {
            // on success, write the returned article content into the article element
            $('#article').html(data);
        }
    });

    return false;
});​
于 2012-12-30T14:46:57.050 に答える