javascript - jQuery Ajax method succeeds, but no data received - Stack Overflow

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:

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:

• javascript
• php
• jquery
• ajax
• post

Share Improve this question Follow edited Aug 13, 2015 at 16:37 rrk 15.9k44 gold badges3030 silver badges4747 bronze badges asked Aug 13, 2015 at 15:44 kchowkchow 6322 silver badges66 bronze badges 5

• Look in the 'Headers' tab on the connection, and you should see what was actually sent to PHP. It's possible that javascript scope means that 'title' isn't actually defined inside post(); – samlev Commented Aug 13, 2015 at 15:48
• 6 nice screen shot :) – itwasntme Commented Aug 13, 2015 at 15:49
• Thanks, I needed to give some more context of the problem including a visual of my screen and keyboard. – kchow Commented Aug 13, 2015 at 15:59
• I remend to use Promise methods of the jqXHR object: done(), fail(), always(), then(). On jQuery "Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.plete() callbacks are deprecated as of jQuery 1.8." – ramabarca Commented Aug 13, 2015 at 17:25
• 1 @kchow FYI: You need to try that magic button out, it's really great :} (See the keyboard button: imgur./nsfc2T5 ) – Rizier123 Commented Aug 13, 2015 at 18:25

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

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/");
},