Question

我在链接上使用了以下代码。这可以防止页面重新加载并从div中的href标记加载内容。

  $("a[rel='right']").click(function(e){
    e.preventDefault();
    pageurl = $(this).attr('href');
    $.ajax({url:pageurl.replace('index.php', 'rightcolumn.php')+'&rel=right',success: function(data){
      $('#WMS_NEW_right').fadeOut(500, function(){ $('#WMS_NEW_right').html(data).fadeIn(1000); }); 
    }
    });  
    if(pageurl!=window.location){
      window.history.pushState({path:pageurl},'',pageurl);
    }
    return false;
  });
});

我的问题：我需要使用相同的概念，除了表单提交，它不需要重新加载页面，但只在div #WMS_NEW_right内提交表单。我怎样才能做到这一点？我不需要推送状态或任何东西，只需要能够使用class="formrelright"来控制该表单，只重新加载div并从表单操作中获取url。我还需要新页面上的method="POST"格式的所有数据（div内）

Answer 1

根据我的理解，您希望在表单提交期间使用ajax发布表单而不重新加载页面。所以我会考虑以下几点：

$('.formrelright').submit(function(event) {
    event.preventDefault();

    $.ajax({
        url: url,
        type: 'POST',
        data: $(this).serialize(),
        success: function(data) {
            // Whatever you want
        }
    });
});

Answer 2

使用target和IFrame，或JQuery在后台提交表单。如果你想使用响应的内容，后者是最好的。

JQuery post()

Answer 3

也许尝试这样：

HTML：

<!-- Notice there is no 'form' element -->
<div id="myform">
    <input type="text" name="firstName"><br>
    <input type="text" name="lastName"><br>
    <button type="button" id="submit_myform">Submit</button>
</div>

<div id="resultArea"></div>

<!-- the biggest critique about this method might be that
     yes, it is not very semantic.  If you want to use a form,
     just throw in an 'e.preventDefault()' in your jQuery -->

jQuery的：

$('#submit_myform').on('click',function() {

    var firstName = $('input[name="firstName"]').val(),
        lastName = $('input[name="lastName"]').val();

    $.ajax({
        type: "POST",
        url: 'form.php',
        data: {
            firstname: firstName,
            lastname: lastName
        },
        //the success function is automatically passed the XHR response
        success: function(data) {
            $('#resultArea').html(data);
        },
    });

});

Javascript / JQuery：在表单提交时，不要重新加载整页（只有div），仍然提交表单数据

3 个答案: