0

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

我基于这篇文章的 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();
});
4

2 回答 2

1

如果你想保持一个正常的形式，只是捕获提交事件，那么你可以做这样的事情：

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

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

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

于 2013-03-04T22:17:48.713 回答
-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);  
      });
于 2013-03-04T21:33:48.183 回答