jquery通过表单提交div加载中继内容div

Question

我正在开发一个消息系统。我已完成收件箱和消息查看部分。它们被加载到用户帐户页面上的div中，并且它在刷新页面时都可以工作。

我基于这个在this article上的jquery。

在这里获得一些帮助，以获取消息链接，以便在无需刷新页面的情况下在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

我想这会帮助你：

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); 
     }); 

Answer 2

如果要保持正常形态，只是捕捉提交事件，那么你可以做这样的事情：

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

基本上在提交我们将运行一个函数，而不是立即提交。我们发送ajax电话（提交您的表格数据），然后return false。返回false将阻止页面提交表单（在这一点上它会再次提交它，因为我们刚刚提交了一个Ajax）。所以你可以做所有的逻辑，你的ajax调用，任何额外的检查/处理，然后返回false来停止提交。

我在那里添加了一些以防万一你想有一些错误恢复或有关使用ajax提交的条件。如果您返回true而不是false，则页面将继续进行表单提交并重定向到该页面。所以如果你有一个禁用Ajax提交的模式，你可以在这里使用。我在那里放了一个无稽之谈，只是作为一个概念证明。您可以使用该支票玩，看看它的工作。