jQuery Ajax method succeeds, but no data received

Question

I've spent over 10 hours on this problem and basically scoured the entire internet for a solution. It's a simply jQuery ajax POST method, one that I've used a few times before successfully. In the past I had this problem also but somehow solved it. The data I'm passing seems to be okay, in the network console of chrome it even shows a successful post with the supposed data. However, using .load to get that data always returns null. In the code below, I used a form that I prevented from default submitting to prevent a refresh. A button triggers sellBook(), which prompts a form, after which submission triggers post().

JS

    function sellBook(i) {
        $('#results').html('');
        title = books[i].title;
        author = books[i].author;
        ISBN = books[i].ISBN;
        publisher = books[i].publisher;
        image = books[i].image;
        year = books[i].year;
        $('#results').html('Listing for ' + books[i].title + ' by ' + books[i].author + '<br><br><form method="post" action="https://localhost/textbookexchange/db2.php" id="sellIt">Edition #: <input type="text" id="edition" name="edition"/><br><br>Price: $<input type="text" id="price" name="price"><br><br>Condition: <input type="text" id="condition" name="condition"><br><br><input type="submit" value="Submit"><br><br></form>');
        getInfo();

        $('#sellIt').submit(function () {
            post();
            return false;
        });
    }

    function post() {
        price = document.getElementsByName('price')[0].value;
        edition = document.getElementsByName('edition')[0].value;
        condition = document.getElementsByName('condition')[0].value;
        var formData = {
            A: title,
            B: author,
            C: ISBN,
            D: publisher,
            E: image,
            F: year,
            G: soldby,
            H: fblink,
            I: price,
            J: edition,
            K: condition
        };

        var url = 'db2.php/'
        jQuery.ajax({
            type: 'POST',
            url: url,
            data: formData,
            success: function (data) {
                alert(data);
                $('#results').load("db2.php/");
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status + " " + thrownError);

            },
        });
    }

I'm always returned success, never the error, as I get an alert with the data.

In my apache error logs I get this:

[Thu Aug 13 11:24:15.666854 2015] [:error] [pid 4255] [client 127.0.0.1:50476] PHP Notice: Undefined index: A in /var/www/html/textbookexchange/db2.php on line 2, referer: https://localhost/textbookexchange/

   db2.php(the php file POSTED to)
   <?php
   echo $_POST['A'];
   ?>

I've tried parsing it as JSON, resetting contentType, setting dataType, setting crossdomain to true, async to false, using jsonp, using $.post, using less data (only one variable), and a handful of other things..

Heres a screenshot of network requests:

Answer 1

load() creates a seperate get request, so there is no POST data for php to use. What you need to do is use the data returned from the post request:

success: function(data) {
    alert(data);
    $('#results').html(data); //.load("db2.php/");
},