Problems with AJAX/jQuery with retrieving JSON and dataType

Question

My problem may be simple but I can't just find what it is wrong. I am doing some ajsx/jQuery code for practising and learning more but jQuery and AJAX has a weird thing about it for me. I can't find any complete info about dataTypes and how to retrieve and manipulate each type (text, html, json, jsonp (I don't know what is jsonp), etc).

I copied headers in the HTML page and in the PHP file and even in the AJAX object.

First dataType question: If I ask for text or html data it seems that if I do an .append() or .text() it seems that it copies all the php file literally and write it in the alert or in the html document, it copies all PHP code even though I want only to retrieve the thing I echo in my php file.

Sometimes I do echo "test"; and if I do an alert of the data retrieved as text or html it will output test"; being the echo the last line on the php file. So this dataType thing is confusing to me.

Then the AJAX/JSON question. I am copying the simple code so you can see what is the problem. The code is simple code for the sake of testing because I didn't want to complicate it more until I'm sure the basic things work.

HTML FILE:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-type" value="text/html; charset=UTF-8" />
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            //Guardar al cargar la pagina la ip en el servidor.
            var a1 = {
                url: "servidor_datos.php",
                async: true,
                type: "GET",
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                success: function(data){
                    alert(data);
                    //$("#contador").append("test");
                },
                error: function(){
                    alert("Error");
                }
            };

            $.ajax(a1);
        });
    </script>
</head>
<body>
    <div id="contador"></div>
</body>
</html>

PHP FILE:

<?php
header('Content-Type: application/json; charset=utf-8');
$json = array("data" => "asdf");
$json = json_encode($json);
echo $json;

I'm trying to do a unique IP visitor counter and I'm not sure If I'm doing it correctly. First I check if the IP exists and if not I add the new ip to the database. Then I execute an Ajax request using a setInterval every 5 seconds to keep checking and updating the number of unique visitors and update it asynchronously.

Is it ok to use a setInterval to keep looping and checking constantly or should I do it in another way like a server event firing a code piece that checks the number of visitors and sending it asynchronously? Whatever it is, I'd want it to be updated without having to refresh the page. So I don't know if a server sent events or JavaScript web workers should be a better approach.

Answer 1

You could use dataType: "JSONP" if this Ajax request is across domains as you might have a CORS issue. Also look at using

$.getJSON("servidor_datos.php").done(function(data){console.log(data)});

Use console.log() to see what the PHP script is returning to your browser. Open up console tab in your browsers inspector.

Also to access the index data in your PHP array you will need to console.log(data.data) to get the value.

Problems with AJAX/jQuery with retrieving JSON and dataType

Question

1 answers

solution1
0 2015-10-08 23:36:45

Problems with AJAX/jQuery with retrieving JSON and dataType

Question

1 answers

solution1 0 2015-10-08 23:36:45

solution1
0 2015-10-08 23:36:45