Question

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

我在this article上将jquery建立在此基础上。

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

我转到使用模态（twitter bootstrap）加载外部表单的消息发送方。这也有效，但我现在花了很多时间试图找出如何做与链接相同的事情，表单提交，即提交它以刷新整个页面。同样，我使用与收件箱部分相同的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);  
      });

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

2 个答案: