使用Ajax发布到PHP脚本（Jquery）

Question

我有一个我写的应用程序，在它的一个方面，你点击一个复选标记来完成一个任务，一个弹出窗口显示（使用bootstrap），你输入你的小时，然后发送到PHP页面来更新数据库。我正在使用FF（firebug）查看帖子。它会变红但不会给我一个错误。我唯一要做的就是在PHP页面上回显“sup”，它仍然显示错误，我无法弄清楚原因。

这是我的初始点击功能：

$('.complete').on('click', function(event) {
    var id = $(this).attr('data-id');
    var tr = $(this).parent().parent();
    var span = $(tr).children('td.task-name');

    var r = (confirm('Are you sure you want to complete this task?'));

    if (r){
        addHours(id);
    } else {
        return false;
    } // end else
});

工作正常，它会触发我的下一个实际触发引导模式的函数：

function addHours(id) {

    var url = 'load/hours.php?id='+id;

    $.get(url, function(data) {

        $('<div class="modal hide fade in" id="completeTask">' + data + '</div>').modal()
        .on('shown', function() {

            pendingTask(id);

        }); // end callback 

        }).success(function() { 

        $('input:text:visible:first').focus(); 
    });

} // end function

这也有效，并且模态显示得很好。但是，每当我将表单发布到我的逻辑页面时，它都会无缘无故地失败。这是将表单发布到逻辑页面的功能：

function pendingTask(id) {

$('.addHours').on('click', function(event) {

        var formData = $('form#CompleteTask').serializeObject();
            $.ajax({
                  url:'logic/complete-with-hours.php',
                  type: 'POST', 
                  dataType: 'json',
                  data: formData,
                  success: function(data) {
                      if (data.status == 'error') {     
                          $(this).attr('checked', false);
                          //location.reload();
                      } // end if       
                      else  { 
                          $(this).attr('checked', true);
                          //location.reload();
                      } // end else      
                  },
                dataType: 'json'
            });     

}); // end click

} // end function

当这个被解雇时，我在Firebug控制台中看到了这个：

我知道这是很多信息，但我想提供尽可能多的信息。应用程序中的每个其他post函数都运行正常。就是这个。任何帮助，将不胜感激。

提前致谢。

Answer 1

jQuery.ajax data参数采用键值对的简单对象。问题可能是serializeObject()创建的对象太复杂了。如果是这种情况，您可以处理formData对象以简化它或尝试data: JSON.stringify(formData)

Answer 2

serializeObject（）甚至存在于jQuery中吗？这是你自己写的功能吗？你可以使用像serialize（）或serializeArray（）这样的jQuery函数来序列化表单数据，看看它是怎么回事。

Answer 3

通常红色表示404响应错误。我们在这个屏幕截图中无法分辨。通过直接调用请求的页面并获得正确的响应来检查您的PHP代码。

还要确保您的dataType是application/json，这是正确的mime类型标头（尽管我不认为这会导致错误）。你也应该只有dataType一次（你在底部再次拥有它）

Answer 4

我明白了。我将帖子类型从上面输入的结构更改为标准帖子：

$("#CompleteTask").validate({

                submitHandler: function(form) {

                    var hours = $('#hours').val();

                        $.post('logic/complete-with-hours.php', {'hours': hours, 'id':id}, 

                            function(data){ 

                                if (data.status == 'success') { 
                                    $(checkmark).attr('checked', false);
                                    $('.message').html(data.message).addClass('success').show();                                        
                                } // end if 

                                if (data.status == 'error') { 
                                    $('.message').html(data.message).addClass('error').show();  
                                } // end else                                           
                            },
                        "json"
                        ); //end POST                                                   
                } // end submit handler 
            }); // end validate

这似乎可以解决问题