Javascript 如何使提交按钮发出表单的帖子，但将返回的结果放入HTML元素中？

我正在开发一个单页web应用程序。我添加了以下登录代码：

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

这将起作用，并用以下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>

...
注意，页面上有客户端验证，但我不在这里显示
...

当表单出现时，如果我单击submit，它将向发送请求 浏览器将打开，并返回一个新页面。还有什么方法可以让我继续吗 保留提交操作（用于我页面上的客户端验证） 但是让提交的结果返回一个再次显示的页面

---

在#文章部分

中，您正在查找

事件。preventDefault（）

，以避免发送表单和重新加载整个网页。看

是否有一种方法可以保持提交操作（针对客户端） 验证（在我的页面上），但有提交的结果 是否带回再次显示在#文章部分的页面

我不确定我是否正确理解了这一点，但如果您希望在提交时加载文章内容而不重新刷新页面，则可以绑定到

submit

事件并执行类似以下内容的ajax调用：

我在下面的示例中使用了

on

，该示例仅添加到jQuery1.7中。如果您使用的是jQuery 1.6.x或更低版本，则可以使用

bind

---

这还会执行提交以触发jQuery客户端验证吗？@SamanthaJ:

$form.valid（）

执行验证，与当前提交一样，如果表单有验证错误，则返回false。在这种情况下，您不会继续提交。我还修复了if语句的逻辑问题

if（$form.valid（））{

应该是

if（！$form.valid（））{

$("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;
});​