将mysqli结果从php-method传递给html文件以显示它

I wrote a NotesApp, where a user can log in after he registered himself.

I do redirections after every step.

I use a UserID within the table of the notes, to be able to pass back only the notes from the specific user. The UserID is saved in a $_SESSION-Variable within PHP.

The Method in my DBHandler-Class which should get the Data from the database is as follows:

function getNotes($userID){
    assert($this->connection);

    $db = $this->connection;

    $queryCreate = "select `title`,`content` from `notesnew` where `userid` = ?;";
    $statement = $db->prepare($queryCreate);
    $statement->bind_param('s',$userID);
    $statement->execute();
    $result = $statement->get_result();
    $returnVar = array();
    while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
        $returnVar[] = $row;
    }
    echo json_encode($returnVar);
}

I call the method after the user has pressed the "Add-Note"(he can set title, text then "Add-Note-Button"-> Note is inserted into the database.

Now i want to make an Ajax-Request to get the notes added to the div.

I did some tries, i know that its not completely correct, but i dont know how to pass the $_SESSION["UserID"] (which is actually just on the server-side) within the ajax method.

Thats my first tries of ajax, so dont be mad xD

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>MyNotes</title>

<link rel="stylesheet" href="notesStyle.css"/>
<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
</head>
<body>

<form action="notes.php" method="post">
    <label>Add Note</label><br><br>
    <input type="text" name="Title" value="title"/><br>
    <input type="text" name="Text" value="text"/><br>
    <input type="submit" id="Submitter" name="Submit" value="Add Note"/>
</form>

<div id="notesDiv">
    <label>YourNotes</label>
</div>


<script>
    $.('#Submitter').click(function(){
        $.ajax({
            url:'DBHandler.php', 
            data:'POST', 
            dataType:'json', 
            success:function(rows){
                for (var i in rows){
                    var row = rows[i];
                    $('#notesDiv').append(row);
                }
            }
        });
    });
</script>
</body>
</html>

Is it generally a good way to use Ajax for my specific problem?

Can you tell me what i have to add, to make it working? It also redirects me, after i have clicked on the Add-Note-Button (what i dont want)

I thought about putting the html in a php file and echoing the $_SESSION["UserID"] into a Jscript variable. Does this make sense?

Thanks for your help! Im very glad i signed up here :)