使用带有php的jQuery Ajax POST时出现502 Bad Gateway错误

Question

I am trying to send data to a database. Here is the method I am using:

<script>

function add_new_activity(id) {

    var act_type = $("#add_new_activity #act_type").val();
    var act_muscles = $("#add_new_activity #multi").val();
    var act_location = $("#add_new_activity #act_location").val();
    var act_intensity = $("#add_new_activity #act_intensity").val();
    var act_length = $("#add_new_activity #timepicker").val();
    var act_content = $("#add_new_activity #textarea").val();                                                           
    if(act_type != "" && act_muscles != "" && act_location != ""  && act_intensity != "" && act_content != ""){
        $.ajax({
            type: "POST",
            url: "data.php",
            data: "page=profile&add_new_activity=<?php echo $user->user_id; ?>&act_type="+act_type+"&act_muscles="+act_muscles+"&act_location="+act_location+"&act_intensity="+act_intensity+"&act_length="+act_length+"&act_content="+act_content,
            success: function(data){
               location.reload();
            },
            beforeSend: function(){
                $("#add_new_activity #add_act_button").html("<?php echo $translate->_('adding'); ?>...");
            }
        });
    } else {
        $("#add_new_activity #message").html("<div class='alert alert-error'><button type='button' class='close' data-dismiss='alert'></button><?php echo $translate->_('required_field'); ?></div>");
    }
}
</script>

part of data.php

if(isset($_POST['add_new_activity'])){
    $user_id = $_POST['add_new_activity'];
    $act_type = $_POST['act_type'];
    $act_muscles = $_POST['act_muscles'];
    $act_location = $_POST['act_location'];
    $act_intensity = $_POST['act_intensity'];
    $act_length = $_POST['act_length'];
    $act_content = $_POST['act_content'];                                                                                                                                           
    Profile::add_new_activity($user_id, $act_type, $act_muscles, $act_location, $act_intensity, $act_length, $act_content);}

part of Profile class

public static function add_new_activity($user_id, $act_type, $act_muscles, $act_location, $act_intensity, $act_length, $act_content,$user_id=""){
    global $database;
    global $translate;

    $datetime = strftime("%Y-%m-%d %H:%M:%S", time());
    $database->query("INSERT INTO activities (id,type,body,intensity,location,content,length,posted,user_id) VALUES ('','{$act_type}','{$act_muscles}','{$act_intensity}','{$act_location}','{$act_content}','{$act_length}','{$datetime}','{$user_id}') ");

}

If I post a small amount of data everything is ok, but if I post a large amount I get this error:

server log:

ip - - [17/Jan/2014:00:02:00 +0100] "POST /fitstats/data.php HTTP/1.1" 200 537 "http://ssbox.si/fitstats/profile.php?lang=en&username=some1ell" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36"

How can I pass these error and successfully send data to mysql?

Answer 1

Disclaimer: It's been a while since I've done anything in web world.

As for an approach to spsc_tech's answer:

I generally like to wrap my data into an object like so:

function add_new_activity(id) {
    var act_type = $("#add_new_activity #act_type").val();
    var act_muscles = $("#add_new_activity #multi").val();
    var act_location = $("#add_new_activity #act_location").val();
    var act_intensity = $("#add_new_activity #act_intensity").val();
    var act_length = $("#add_new_activity #timepicker").val();
    var act_content = $("#add_new_activity #textarea").val();                                                           
    if(act_type != "" && act_muscles != "" && act_location != ""  && act_intensity != "" && act_content != ""){
        var theData = {};
        theData['page'] = 'profile';
        theData['add_new_activity'] = '<?php echo $user->user_id;?>';
        theData['act_type'] = act_type;
        theData['act_muscles'] = act_muscles;
        theData['act_location'] = act_location;
        theData['act_intensity'] = act_intensity;
        theData['act_length'] = act_length;
        theData['act_content'] = act_content;

        $.ajax({
            type: "POST",
            url: "data.php",
            data: theData,
            success: function(result){
               location.reload();
            },
            beforeSend: function(){
                $("#add_new_activity #add_act_button").html("<?php echo $translate->_('adding'); ?>...");
            }
        });
    } else {
    $("#add_new_activity #message").html("<div class='alert alert-error'><button type='button' class='close' data-dismiss='alert'></button><?php echo $translate->_('required_field'); ?></div>");
    }
}