使用 Ajax (Jquery) 发布到 PHP 脚本答案

【问题标题】：Posting to a PHP script with Ajax (Jquery)使用 Ajax (Jquery) 发布到 PHP 脚本
【发布时间】：2013-05-10 18:23:17
【问题描述】：

我正在编写一个应用程序，在其中一个方面，您单击复选标记以完成任务，显示一个弹出窗口（使用引导程序），您输入您的时间，然后发送到一个 PHP 页面来更新数据库。我正在使用 FF（萤火虫）查看帖子。它变红了，但没有给我一个错误。我唯一要做的就是在 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 控制台中看到：

我知道这是很多信息，但我想提供尽可能多的信息。应用程序中的所有其他帖子功能都运行良好。就这一个。任何帮助，将不胜感激。

提前致谢。

【问题讨论】：

标签： php jquery ajax json post

【解决方案1】：

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

【讨论】：

我尝试将 JSON.stringify(formData) 添加到数据属性中，但它对我不起作用。在尝试序列化表单之前，我也遇到了这个问题。之前，我使用这个： var id = $('#id').val(); var hours = $('#hours').val();然后我的数据对象将是： data: {'id':id', 'hours':hours}

【解决方案2】：

serializeObject() 甚至存在于 jQuery 中吗？那是你自己写的函数吗？能否使用 jQuery 函数如 serialize() 或 serializeArray() 对表单数据进行序列化，看看效果如何。

【讨论】：

它是一个 jquery 插件，我已经使用了一段时间。节省将所有表单值设置为变量的时间。 api.jquery.com/serialize
您在使用 serializeObject 时将我指向序列化。我知道有一个名为 serializeObject 的插件，但我想知道该插件是否有问题，可能会给您带来问题。您是否尝试过使用 serializeArray 或从 jQuery 本身进行序列化，看看是否能解决您的问题。

【解决方案3】：

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

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

【讨论】：

【解决方案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

这似乎可以解决问题

【讨论】：