jQuery通过表单提交在div中加载重新加载div中的内容

Question

我正在开发一个消息传递系统。我已经完成了收件箱和消息查看部分。它们被加载到用户帐户页面上的 div 中，并且无需刷新页面即可全部使用。

我的 jquery 是基于 this article。

在此处获得一些帮助，以获取消息链接以在不刷新页面的情况下在 div 中打开消息，以及如何添加过滤器以允许配置文件链接实际刷新并转到实际的配置文件页面。这一切都很好。

我转到消息发送端，它使用模式（twitter 引导程序）来加载外部表单。这也行得通，但我现在花了很长时间试图弄清楚如何对链接做同样的事情，使用表单提交，即在不刷新整个页面的情况下提交它。同样，我使用的 jQuery 与收件箱部分几乎相同。

这是收件箱代码：

<p id="waiting"><!-- ajax loading --></p>
<div class="messages"><!-- inbox --></div>

Javascript：

$.ajaxSetup({ cache: false});
$(document).ready(function(){
    // set up the click event
    $('a.loader').live('click', function() {
        var toLoad = '<? echo base_url(); ?>user/messaging/';
        $('.messages').fadeOut(100, loadContent);
        $('#load').remove();
        $('#waiting').append('<div id="load" style="height: 700px; background:url(<? echo base_url(); ?>files/recordCovers/index.html?<? echo rand(5,1555); ?>); background-size: cover;"><div class="circle"></div><div class="circle1"></div></div>');
        $('#load').fadeOut(1000);

        function loadContent() {
            $('.messages').load(toLoad, '', function(response, status, xhr) {
                if (status == 'error') {
                    var msg = "Sorry but there was an error: ";
                    $(".messages").html(msg + xhr.status + " " + xhr.statusText);
                }            
            }).fadeIn(4000, hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut(2000);
        }
        return false;
    });
});

<? // this makes the links open in the same div
// a:not(.profile) allows profile links to open in browser window
// we put class="profile" on profile links.?>
$(".messages").on("click", "a:not(.profile)", function (e) {
    $(".messages").load($(this).attr("href"));
    e.preventDefault();
});

Answer 1

如果你想保持一个正常的表单并且只捕获提交事件，那么你可以这样做：

http://jsfiddle.net/ufomammut66/uPvYx/2/

基本上，在提交该表单时，我们将运行一个函数，而不是立即提交。我们发送一个 ajax 调用（提交您的表单数据），然后发送return false。返回 false 将阻止页面提交表单（此时它会再次提交，因为我们只是使用 ajax 提交的）。因此，您可以执行所有逻辑、ajax 调用、任何其他检查/处理，然后返回 false 以停止提交。

我在其中添加了一些内容，以防您希望进行一些错误恢复或围绕使用 ajax 提交的条件。如果您返回 true 而不是 false，页面将继续提交表单并重定向到该页面。因此，如果您有禁用 ajax 提交的模式，您可以在此处使用它。我在那里放了一个废话检查，作为概念证明。您可以使用该检查来查看它是否有效。

Answer 2

我想它会帮助你：

function submit()
{
 $.ajax({
      type:'POST',
      url: "your url to submit",
      data: ({param_1:somevar}),    
      dataType:"json",  
      beforeSend: function(){ //do something here }
          success: function(return){ //do something here }
 });
}

并且不要放置任何提交按钮。您可以使用以下方式调用提交函数：

$('#button').click(function(){
        submit(somevalue);  
      });