Save data to MySQL and update page with that data without refresh

Question

I am trying to save data from a comment form into a MySQL database then update the page with that comment without the user having to refresh. Similar to how Facebook comments work.

I've searched all over the place for an answer to this, but I haven't found one that suites my needs.

Here is the AJAX that submits the form data to the php script:

var ajaxSubmit = function(formEl) {
    // fetch where we want to submit the form to
    var url = $(formEl).attr('action');

    // fetch the data for the form
    var data = $(formEl).serializeArray();

    // setup the ajax request
    $.ajax({
        url: url,
        data: data,
        dataType: 'json',
        success: function(data) {
            if(rsp.success) {
                alert("Comment Successfully Added!");
        }
    });
  return false;
}

I know the page will NOT be updated with this script currently because I am calling an alert. However, when I submit the data I am being taken to the /ajax/comment.process.php page which is the page that calls the insertComment() function and inserts the comment to the database. I have the alert() function in the success() function right now and I am not even getting that.

What I want is when the comment is submitted, the user doesn't leave the current page, it is just updated with what they just submitted.

Here is the code in /ajax/comment.process.php'

    session_start();

include_once('../classes/comment.class.php');
include_once('../classes/db.class.php');

$user_id = $_SESSION['user_id'];

$db = new DBConnection;
$comments = new Comment($db);

$blog_id = intval($_POST['blogID']);

$addCom = $comments->addComment($user_id);

if($addCom === FALSE) {
    $resp = "<span class='error'>Error adding comment</span>";
} else {

    $resp = $comments->getComments($blog_id);
}

return $resp;

This script calls the insertComment() function which saves the comment to the database, then if that returns true, it calls the getComments() function which retrieves the comments for that particular post and stores them in an array.

The comments ARE successfully being saved to the database, but I am redirected to the ajax/comment.process.php page which is blank. How can I update the current page with the comment they posted without having to refresh the page? I thought returning the $resp variable would do it then I could just do a foreach() loop to display them, however that is clearly not the case.

EDIT: I have implemented EVERYTHING suggested in the answers below and I have still not yet fixed this issue. The form is STILL being submitted to /ajax/comment.process.php even when I have these three things that should prevent the form from being submitted: preventDefault(); , return false; and return ajaxSubmit(this);

Answer 1

In the ajax you could delete the dataType: 'json', and delete the if(rsp.success) { and make a simple alert

$.ajax({
        url: url,
        data: data,
        success: function(data) {
                alert("Comment Successfully Added!");
                alert(data);
        }
});

In the php instead of the return you are using, use echo

echo $resp;

At least you will see if there is an error

After that you could start using the json code

In the php

echo json_encode($resp);//as soon as $resp is an array

and in the ajax you could alert like this alert(data.keyofthearray)

Answer 2

To prevent the form from submitting(which is what is happening) use onsubmit="return ajaxSubmit(this);"

also you have a syntax error in your ajax code. You never close the if block

var data = $(formEl).serialize();
$.ajax({
    url: url,
    data: data,
    dataType: 'json',
    success: function(data) {
        if(data.success) {
            alert("Comment Successfully Added!");
        }
    }
});