Why always jQuery Ajax JSON Request Fails?

Question

I currently have a code snippet which I'd like to use to get Ajax Calls and return JSON data from my PHP file which I can use however I want in the jQuery side. My problem is that IF I change the data type to JSON, I always get error on the request, HOWEVER when I inspect it in Firebug I can see that the PHP file has just returned the JSON values fine!

This is the HTML:

<form id="formm" method="post">
    <input type="text" name="test" value="" id="test"/>
    <input type="submit" name="submit" value="Submit"/>
</form>

<div id="result"></div>

This is the JS:

$("#formm").submit(function(event) {

    /* Stop form from submitting normally */
    event.preventDefault();

    /* Clear result div*/
    $("#result").html('');

    /* Get some values from elements on the page: */
    var values = $(this).serialize();

    /* Send the data using post and put the results in a div */
    $.ajax({
        url: "functions.php",
        type: "post",
        dataType: "json",
        data: values,
        success: function(data) {
            alert(data);
        },
        error:function(){
            alert("failure");
            $("#result").html('There is error while submit');
        }
    });
});

PHP file:

echo json_encode(array('returned_val' => $_POST['test']));

When I inspect with Firebug I get: returned_val "whatever I type in the textbox". Can anyone tell me what could be the problem?

UPDATE:

Response Headers:

Accept  application/json, text/javascript, */*; q=0.01
Accept-Encoding gzip, deflate
Accept-Language ***
Content-Length  5
Content-Type    application/json; charset=utf-8
Host    localhost
Referer http://localhost/test/
User-Agent  Mozilla/5.0 (Windows NT 6.1; WOW64; rv:24.0) Gecko/20100101 Firefox/24.0
X-Requested-With    XMLHttpRequest

When I put the errors in the console, I get this:

The following error occured: parsererror SyntaxError: JSON.parse: unexpected character

shouldn't you serialize JSON string with JSON.stringify() instead of serializing it with jquery function serialize()? — BeNdErR
– BeNdErR, Commented Oct 19, 2013 at 15:42
Write the json your php file generates to a file and copy/paste it to jsonlint.com . It will tell you where the problem is. If I have to guess there is a BOM character at the very beginning of your json response. — Sumurai8
– Sumurai8, Commented Oct 19, 2013 at 15:44
@Sumurai8 I have pasted it, and it says the following: Parse error on line 1: { "returned_val ^ Expecting '{', '[' So I guess it is using the wrong symbols but why? What did I do that it uses this symbol instead of the good one? — Radical_Activity
– Radical_Activity, Commented Oct 19, 2013 at 15:48

sonam · Accepted Answer · 2013-10-19 16:13:06Z

7

The JSON data is parsed in a strict manner; any malformed JSON is rejected and a parse error is thrown. As of jQuery 1.9, an empty response is also rejected; the server should return a response of null or {} instead

here is the documentation http://api.jquery.com/jQuery.ajax/

so check your json response from php (whether the json data is well formed and non empty)

answered Oct 19, 2013 at 16:13

sonam

3,78012 gold badges47 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why always jQuery Ajax JSON Request Fails?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related