AJAX form not submitting that gives error

Question

I have my AJAX code here

$("#add-student").click(function(e) { 
    e.preventDefault(); 
    formData = $("#student-form").serialize(); 
    if (cleanFormInput()) {
        sendTheInfo(formData);
    } else { 
        shakeForm();
    }
});

function sendTheInfo(formData) { 
    $.ajax({ 
        type: "POST", 
        url: "../classes/ajax/postNewStudent.php",
        data: formData, 
        statusCode: {
            404: function() {
                alert( "page not found" );
            }
        },
        success: function(formData) { 
            console.log("New student submitted:\n" + formData);
        //clearForms();
        },
        error: function(result, sts, err) { 
            console.warn("Connection error:\n" + err + " : " + sts);
            console.log(result);
            shakeForm();
        },
        complete: function() { 
            console.log("Everything complete");
        }
    });
}

Always without fail outputs this error: Connection error: SyntaxError: Unexpected end of input : parsererror

But still gives the complete message: Everything complete

Update, PHP code here:

    require '../../core/init.php';
    require '../../classes/Config.php';

    header('Content-Type: application/json');

    if (!empty($_POST)) {

        $id = $_POST["sid"]; 
        $first = $_POST["first"];
        $last = $_POST["last"]; 
        $fav = "0";

        $sql = "INSERT INTO `students` (`id`, `first`, `last`, `active`) VALUES ('{$id}', '{$first}', '{$last}', '{$fav}')";

        $link = mysql_connect(Config::get('mysql/host'),Config::get('mysql/username'),Config::get('mysql/password')) or die("could not connect");;
        mysql_select_db(Config::get('mysql/db'), $link);

        $result = mysql_query($sql, $link);

        if ($result) {
            header('Content-Type: application/json');
            $student_data = $id . $first . $last . $fav;
            echo json_encode($student_data);
        }
    }

I'm a bit confused, am I doing my ajax set up wrong? Or is it something else in by backend code wrong? I'm using MySQL and jQuery 2.0.3

Updated code here: here

Answer 1

removed my old answer. I don't think it is an ajax/javascript error. it's definitely a PHP error. It's this lines:

$student_data = $id . $first . $last . $fav;
echo json_encode($student_data);

You $student_data is not an array, it's just a string. You need to pass an array into the json_encode function

Answer 2

I have had a look at your code. I saw that from the PHP side you are sending a JSON object. but you didn't specified the return dataType for the response. Try to add the dataType in the ajax call. Maybe that will solve the problem

function sendTheInfo(formData) { 
$.ajax({ 
    type: "POST", 
    url: "../classes/ajax/postNewStudent.php",
    data: formData, 
    dataType : 'json',
    statusCode: {
        404: function() {
            alert( "page not found" );
        }
    },
    success: function(formData) { 
        console.log("New student submitted:\n" + formData);
    //clearForms();
    },
    error: function(result, sts, err) { 
        console.warn("Connection error:\n" + err + " : " + sts);
        console.log(result);
        shakeForm();
    },
    complete: function() { 
        console.log("Everything complete");
    }
});
}

Answer 3

It should be noted that the Ajax COMPLETE method will fire even if the back end does not return a result.

complete: function() { 
        console.log("Everything complete");
    } 

will thus show the log'ed entry every time an ajax call is 'finished executing', even if the submit failed.

I would also suggest NOT having 2 headers or the same declaration (you have one up top, and one in the if(result) call.

In a comment thread, you pointed out that you're working on the server but not locally, And thus that implies you have some pathing issues. Check your

  ../ 

relative path style urls and make sure that you have the same basepoints.