AJAX returning a weird HTML file instead of JSON

Question

I'm using AJAX with jQuery trying to get a response from a database, but I'm not even able to get a proper JSON response. The response that comes, instead of JSON, is an HTML code from a XAMPP page (I'm using it to test locally).

This is the JS code with jQuery and AJAX:

 $('#salvar').click(function(e) { e.preventDefault(); var dados = $('buscaCep').serialize(); $.ajax({ url: "resposta.php", data: dados, type: "POST", dataType: "json", success: function(response) { console.log(response); }, error: function(jqxhr, textStatus, errorThrown) { console.log("jqXHR: ", jqxhr); console.log("textStatus: ", textStatus); console.log("errorThrown: ", errorThrown); } }); return false; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 

And this is the 'resposta.php' file:

 <?php $arr = array(); $arr['cep'] = $_POST['cep']; $conn = ... $sql = ... if ( $conn->ping() ) { $arr['connected'] = true; } else { $arr['connected'] = false; } if ( $conn->query($sql) === TRUE ) { $arr['xstatus'] = "Created" ; $arr['id'] = $conn->insert_id; } else { $arr['xstatus'] = "Error" ; $arr['message'] = $conn->error; } $myJSON = json_encode($arr, JSON_HEX_QUOT | JSON_HEX_TAG); echo $myJSON; ?> 

And the weird response I get is this:

I don't even know where this is coming from. Its an HTML file from XAMPP, the package I'm using to make a local server, but I have no idea why. Tried to look for similar problemas but haven't found anything.

Answer 1

This is what I do (or something like it)

  $.ajax({
    url: "resposta.php",
    data: dados,
    type: "POST",
    dataType: "json",
    always: function(jqxhr, textStatus, errorThrow) {
           try {
                //in the case of a "real" error throw and catch it (DRY like)
                if(errorThrow) throw errorThrow; 
                //in the case we can't parse the JSON response catch that too
                var data = JSON.parse(jqxhr.responseText);

                 /*... other code ...*/

           } catch(e) {
                 console.log("jqXHR: ", jqxhr);
                 console.log("textStatus: ", textStatus);
                 console.log("errorThrown: ", e);
           }
    }
});

Always returns even if you do happen to get a 404 or any error, but if your not sending the application/json headers your browser may not parse the JSON data on it's own, but it doesn't matter because you can try to parse it and then when that fails you can log the errors.

You could probably come up with a way to know if it's the page that responds to a 404 (and add that in the catch block, for an even more sensible error). What I mean by 404 here is not an actual 404 but a unresolvable route in a Framework (I didn't really pay attention to what you are using), some of them may set the proper HTTP status. Some might just show some kind of search page and act like everything is ok.

I had that happen before (a long time ago), where I get a 200 response no matter what and some garbage HTML search page for the response.

Hope it helps.

Answer 2

I didn't tested your code. But with your Error Message, I can say something ...

1. Your AJAX code may be above the jQuery Declaraction.
2. Use Latest Version of JQuery
3. If you are using partial views, then correctly wrap AJAX inside your script section

 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#salvar').click(function(e) { e.preventDefault(); var dados = $('buscaCep').serialize(); $.ajax({ url: "resposta.php", data: dados, type: "POST", dataType: "json", success: function(response) { console.log(response); }, error: function(jqxhr, textStatus, errorThrown) { console.log("jqXHR: ", jqxhr); console.log("textStatus: ", textStatus); console.log("errorThrown: ", errorThrown); } }); return false; }); 

Answer 3

You can try this :

Replace

$myJSON = json_encode($arr, JSON_HEX_QUOT | JSON_HEX_TAG);

with

$myJSON = json_encode($arr, JSON_FORCE_OBJECT);