如何处理从jQuery序列化和发送的PHP中的数据？

Question

I'm struggling to get a $.ajax call to correctly send some form data to PHP (where it gets recorded to a database and then displayed). I'm stumped because I've $.ajax to do similar tasks before and it's worked great but I must be missing something critical here. I've researched other answers (such as this one) but can't find anything there that suggests my current code would not work. Any insight would be greatly appreciated!

The form looks like this:

            <div id="note_add_container">
                <form id="note_add" method="POST">
                    <input type="text" name="title" placeholder="title" />
                    <input type="text" name="summary" placeholder="summary" />
                    <input type="text" name="details" placeholder="details" />
                    <button id="submit_note">Add note!</button>
                </form>
            </div>

            <div id="entries">
                <!-- AJAX call will populate entries here -->
            </div> 

Here is the jQuery:

    $('#submit_note').click(function () {
        var text = $.ajax ({
            type: "POST",
            url: "note_process.php",
            data: $('#note_add').serialize(), 
            dataType: "json",
            async: false,
        }).responseText;
        $('#entries').html(text); 
    })

Here is the PHP note_process.php:

include_once "connect.php";
session_start();

$id = $_SESSION['userid'];
$title = $_POST['title'];
$summary = $_POST['summary'];
$details = $_POST['details'];

$query = mysql_query("INSERT INTO notes (id, title, summary, details) VALUES ('$id', '$title','$summary','$details')");

echo $title . $summary . $details;

Answer 1

Try using 'success', instead of making the Ajax request not-async...

   $('#submit_note').click(function () {
        $.ajax ({
            type: "POST",
            url: "note_process.php",
            data: $('#note_add').serialize(), 
            success: function(text){
                  $('#entries').html(text); 
            }
        });    
    });