jQuery AJAX call returns results before page headers resulting in parseerror

Question

I am trying to create a simple AJAX call using JSON, but I keep getting a parse error on the result and when I check the resultText it shows the source code of the entire page, with the JSON response showing a success above the page headers.

Here is my AJAX call, where #class is a select box with values.

$("#class").change( function () {
            if($('#class').val().length > 0){

                    $.ajax({

                        type: "GET",
                        url: "http://192.168.0.9/ajax",
                        data: 'class_id=' + $("#class").val(),
                        datatype: 'json',
                        async: 'true',
                        beforeSend: function() {
                            alert("Before send!");
                        },
                        success: function(result){
                           if (result.status){

                                $('#result').html(result);
                         } else {
                            alert('request unsuccessful!'); 
                         }

                        },
                        complete: function() {
                            alert("Complete!");

                        },
                            error: function (request,error) {
                             alert('A jQuery error has occurred. Status: ' + error +':'+ request.responseText);                           
                             $("#result").html(request.responseText);  


                        }
                    });                   
            } else {
                alert('Please make a selection');
            }           
            return false; 

            });

This is my PHP function that returns the result

$result = array();
    $result['status'] = "success";
    $result['message'] = "Types";
    header("Content-Type: application/json; charset=utf-8", true);
    echo json_encode($result);

Finally, this is the response I am getting in my error alert:

A jQuery error has occurred status:parseerror
{"status":"success", "message":"Types"}<!DOCTYPE html>
<html>
...rest of my page from where the request was sent

I am hoping this is a simple error and someone can tell me what I am doing wrong?

Is the page where your function is located the same page that you originally loaded? What happens if you just put `exit();` after your `echo` statement? — jeroen, Apr 10 '14 at 01:37

score 0 · Accepted Answer · edited Apr 10 '14 at 12:09

0

Perhaps your parameter should be pass in JSON format:

data: "{'class_id':'" + $("#class").val() + "'}",

edited Apr 10 '14 at 12:09

halfer

19,824
17
99
186

answered Apr 10 '14 at 01:37

Ellen Tan

53
1
1
10

Thanks Ellen, I got a bit further now with your suggestion. The parse error disappeared and it now returns a success, however, the result.status comes back as 'undefined' so now I get a "request unsuccessful" alert instead of the data. Any ideas? – Matt Drake Apr 10 '14 at 02:12
I actually found a related post http://stackoverflow.com/questions/14568173/simple-jquery-ajax-returns-undefined – Matt Drake Apr 10 '14 at 02:18

score 0 · Answer 2 · answered Apr 10 '14 at 01:44

0

Try to remove datatype:'json' from the Javascript and header("Content-Type: application/json; charset=utf-8", true); it should be recognize itself

answered Apr 10 '14 at 01:44

TooShyToAsk

194
2

jQuery AJAX call returns results before page headers resulting in parseerror

2 Answers2