用Ajax (Jquery)发布PHP脚本

I have an application that I'm writing that, in one aspect of it, you click on a checkmark to complete a task, a popup window is displayed (using bootstrap), you enter your hours, and then that is sent to a PHP page to update the database. I'm using FF (firebug) to view the post. It's coming up red but not giving me an error. The only thing I'm doing is echoing out "sup" on the PHP page, and it's still showing errors, and I can't figure out why.

我有一个应用程序，在它的一个方面，你点击一个复选标记来完成一个任务，一个弹出窗口显示(使用bootstrap)，你输入你的时间，然后发送到一个PHP页面来更新数据库。我正在用FF (firebug)查看这个帖子。它是红色的，但没有给我一个错误。我所做的唯一一件事就是在PHP页面上重复“sup”，它仍然显示错误，我不知道为什么。

This is my initial click function:

这是我的初始点击功能:

$('.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
});

That works fine, and it fires my next function which actually fires the bootstrap modal:

这很好，它触发了我的下一个函数它实际上触发了bootstrap模式:

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

This is also working, and the modal is displayed just fine. However, whenever I post the form to my logic page, it fails for no reason. This is the function to post the form to the logic page:

这也是有效的，模态显示的很好。然而，每当我将表单发布到我的逻辑页面时，它就毫无理由地失败了。这是将表单发送到逻辑页的函数:

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

When this is fired, I see this in my Firebug console: 用Ajax (Jquery)发布PHP脚本

当它被触发时，我在我的Firebug控制台看到这个:

I know this is a lot of information, but I wanted to provide as much information as I could. Every other post function in the application is working fine. It's just this one. Any help would be appreciated.

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

Thanks in advance.

提前谢谢。

4 个解决方案

#1

The jQuery.ajax data parameter takes a simple object of key value pairs. The problem could be that the object created by serializeObject() is too complex. If that's the case, you could either process the formData object to simplify it or try data: JSON.stringify(formData)

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

#2

Does serializeObject() even exist in jQuery? is that a function you wrote yourself? Can you use jQuery functions like serialize() or serializeArray() to serialize the form data and see how it goes.

在jQuery中是否存在serializeObject() ?这是你自己写的函数吗?您是否可以使用jQuery函数如serialize()或serializeArray()来序列化表单数据并查看其运行情况。

#3

Usually the red indicates a 404 response error. We can't tell in this screen shot. Check your php code by directly calling the requested page and getting a proper response.

通常红色表示404响应错误。我们不能在这个屏幕上看到。通过直接调用所请求的页面并得到适当的响应来检查您的php代码。

Also make sure your dataType is application/json which is the proper mime type header (though I don't think this is causing the error). You also should only have dataType once (you have it again at the bottom)

还要确保您的数据类型是应用程序/json，这是正确的mime类型标题(尽管我不认为这会导致错误)。您也应该只拥有一次数据类型(您在底部再次拥有它)

#4

I figured it out. I changed the post type from the structure I entered above to a standard post:

我想出来。我从上面的结构改为标准的职位:

$("#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

That seemed to do the trick

这似乎奏效了。

#1

#2