Getting parseerror while receiving response from json_encode using $.ajax

Question

I'm trying to try a pretty simple request and get response thing using $.ajax via. json. I have tried alot to return a simple text phrase from a php file. My js part of code goes like this that calls a beemailer.php to get response.

$.ajax({
        type: 'POST',
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        url: 'beemailer.php',
        data: {
            'name': data_name,
            'email': data_email,
            'message': data_message,
            'subject': data_subject
        },
        success: function (data) {
            var output = jQuery.parseJSON(data);
            console.log(output);
            alert(output);
        },
        error: function (error, x, y) {
            console.log(error);
            alert(x, y);

        }
        )
};

And beemailer.php is like this:

<?php
    $to = "[email protected]";
    $subject = $_POST['subject'];
    $message =$_POST['message'];
    $headers = "From:".$_POST['name']."(".$_POST['email'].")";
    mail($to,$subject,$message,$headers);
    $response = "The mail has been sent. Thank You the valid mail.";
     header("Content-Type: application/json; charset=utf-8", true);
     echo json_encode($response);
?>

What I need for now is simply to get that $response text get alerted. Any help will be appreciated.

Manoj Yadav · Accepted Answer · 2013-07-11 12:05:11Z

3

Remove below code from ajax call and try:

contentType: "application/json; charset=utf-8",

jQuery.parseJSON(data) is not needed as Content-Type is set and encoded in json by below code:

header("Content-Type: application/json; charset=utf-8", true);
echo json_encode($response);

Updated code with test data:

JS

$.ajax({
    type: 'POST',
    dataType: "json",
    url  : 'beemailer.php',
    data: {name: 'rai', email: '[email protected]', message: 'Test message', subject: 'Test subject'},
    success : function(data) {
        console.log(data);
        alert(data);
    },
    error: function(error, x, y)
    {
        console.log(error);
        alert(x, y);
    }
});

PHP (beemailer.php)

<?php
$to = "[email protected]";
$subject = $_POST['subject'];
$message = $_POST['message'];
$headers = "From:" . $_POST['name'] . "(" . $_POST['email'] . ")";
mail($to, $subject, $message, $headers);
$response = "The mail has been sent. Thank You the valid mail.";
header("Content-Type: application/json; charset=utf-8", true);
echo json_encode($response);
?>

Example of object:

$result = array();
$result['status'] = 'success';
$result['message'] = 'The mail has been sent. Thank You the valid mail.';
header("Content-Type: application/json; charset=utf-8", true);
echo json_encode($result);

JS to access object:

$.ajax({
    type: 'POST',
    dataType: "json",
    url  : 'beemailer.php',
    data: {name: 'rai', email: '[email protected]', message: 'Test message', subject: 'Test subject'},
    success : function(data) {
        alert('status: ' + data.status + '\nmessage: ' + data.message);
    },
    error: function(error, x, y)
    {
        console.log(error);
        alert(x, y);
    }
});

edited Jul 11, 2013 at 12:05

answered Jul 11, 2013 at 10:09

Manoj Yadav

6,6121 gold badge25 silver badges21 bronze badges

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

7 Comments

user79307 Over a year ago

tried this but getting undefined data alerted even after getting response in a array wrap. Along with the following response. ......... <tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0002</td><td bgcolor='#eeeeec' align='right'>680008</td><td bgcolor='#eeeeec'>{main}( )</td><td title='C:\wamp\www\ashishsharma.com.np\beemailer.php' bgcolor='#eeeeec'>..\beemailer.php<b>:</b>0</td></tr> </table></font> {"message":"The mail has been sent. Thank You the valid mail."}

Manoj Yadav Over a year ago

That means you have errors in your beemailer.php file, may be because of mail function

user79307 Over a year ago

I just commented mail() function and just returned a simple text as response which is still not working.

Manoj Yadav Over a year ago

I have updated the answer, try Updated code with test data:

user79307 Over a year ago

Thanks manoj, after trying different techniques, with the above code you've suggested, everything is fine but we need to return $response in an object wrap lets say an array as $array = array($response); echo json_encode($array); and alerting an data in success as alert(output[0]). And for my particular case, i came to know I could have used dataType: 'text' and returned response in a way as I and You have returned.

|

T.J. Crowder · Accepted Answer · 2013-07-11 10:46:15Z

1

Because you've said dataType: "json", jQuery will parse the JSON for you before calling your success function, so what you're passing into parseJSON is already an object graph, not a string. Take out that call and rather than using output, just use data directly.

However, what you're returning from your PHP is not a valid JSON document, it's just a JSON fragment (a string). A JSON document must always have a top-level object or array (more). So you need to wrap that string in either an object or an array.

Also, note that you're using the contentType option incorrectly. That defines the type of what you're sending, not the type of what you expect to receive.

For instance:

$response = "The mail has been sent. Thank You the valid mail.";
header("Content-Type: application/json; charset=utf-8", true);
echo json_encode(array(message => $response));

...and then in your success function:

success: function(data) {
    alert(data.message);
}

Note how the key I used in the PHP (message) became a key in the resulting deserialized JSON on the client.

This complete example works:

PHP (test.php):

<?php
    $response = 'This is a test message. You sent: ' . $_POST['param'];
    header('Content-Type: application/json; charset=utf8', true);
    echo json_encode(array(message => $response));
?>

HTML and Script:

<!doctype html>
<html>
<head>
<title>Test Page</title>
<meta charset="UTF-8">
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$.ajax({
    type:    'POST',
    url:     'test.php',
    data:    {param: 'Test param'},
    success: function(data) {
        alert(data.message);
    }
});
</script>
</html>

In a comment below you said:

Can you please explain...about why I am not getting a text as response while returning a text.

You're returning JSON, which is a textual representation of an object graph.

Absolutely you can return just text if you want. To do that, don't involve JSON. Here's an example, but it won't solve the problem you're having of getting extraneous HTML output before your message, which is something happening in your PHP:

PHP (test.php):

<?php
    header('Content-Type: text/plain; charset=utf-8', true);
    $response = 'This is a test message. You sent: ' . $_POST['param'];
    echo $response;
?>

HTML and Script:

<!doctype html>
<html>
<head>
<title>Test Page</title>
<meta charset="UTF-8">
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$.ajax({
    type:    'POST',
    url:     'test.php',
    data:    {param: 'Test param'},
    success: function(data) {
        alert(data);
    }
});
</script>
</html>

edited Jul 11, 2013 at 10:46

answered Jul 11, 2013 at 9:55

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

10 Comments

T.J. Crowder Over a year ago

@accssharma: Did you see the bit about your PHP outputting an invalid JSON document? I've just edited to give you a bit more direction.

user79307 Over a year ago

Nope I haven't yet but have been researching focused on this particular problem. And it's again not working even after wrapping response in an array.

user79307 Over a year ago

Am I doing header("Content-Type: application/json; charset=utf-8", true); this part correctly?

T.J. Crowder Over a year ago

@accssharma: Looks right to me. (And if you have that, you don't actually need the dataType: "JSON" on the jQuery, it'll see the Content-Type. It's harmless, I'm just saying.)

T.J. Crowder Over a year ago

@accssharma: I just noticed you're passing the contentType option in the ajax call, which is almost certainly incorrect, so I've mentioned that. I've also posted a complete example that works.

|

user6284493 · Accepted Answer · 2016-05-03 06:53:50Z

0

Your server may have returned notice/warning. please disable your error reporting sometime to test . error_reporting(0), this works for me in php 5.4.

Hope this will help someone facing same issues.

answered May 3, 2016 at 6:53

user6284493

1

Comments

mike rodent · Accepted Answer · 2017-11-05 10:53:02Z

I just found something absolutely crazy about PHP json_encode and JS AJAX parseerror. If it helps one person that'll justify my including it here.

I was getting totally inexplicable parseerrors with the return of an object involving the simplest of possible PHP objects: just a normal string key and a short string value.

When I'm putting development logging messages in my code I typically put a "£" at the start of messages, just to make it easier to locate them sometimes. Inadvertently I had put a "£" at the start of this message to be returned to the JS AJAX handling... and it was THIS which was causing a parseerror!

I would personally regard this as a bug ... and am amazed to find it in 2017. I have no idea why a leading "£" might have this effect, and wonder (naturally) whether other characters (leading or otherwise) can have the effect of causing a parseerror.

I just did a search on this and found one person mentioning a problem with the pound symbol here (2011).

When you're submitting SQL statements to mysqli you have to put them through an escape function ... this experience makes me wonder whether one is not maybe needed for strings going from PHP to an JS AJAX handler...?

Any experts care to comment?

Collectives™ on Stack Overflow

Getting parseerror while receiving response from json_encode using $.ajax

4 Answers 4

7 Comments

10 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

10 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related