Get JSON data from Arduino with AJAX

Question

I have an Arduino with Ethernet Shield. I'm trying to get data from Arduino, using AJAX call. At the moment I have the following code on Arduino:

#include <SPI.h>
#include <Ethernet.h>

byte mac[] = {
  0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED
};
IPAddress ip(192, 168, 1, 177);

EthernetServer server(80);

void setup() {
  Serial.begin(9600);
  while (!Serial) {
    ; 
  }

  Ethernet.begin(mac, ip);
  server.begin();
  Serial.print("server is at ");
  Serial.println(Ethernet.localIP());
}


void loop() {
  float temperatureIndoor;
  float temperatureOutdoor;
  EthernetClient client = server.available();
  if (client) {
    Serial.println("new client");
    boolean currentLineIsBlank = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        Serial.write(c);
        if (c == '\n' && currentLineIsBlank) {
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: application/json;charset=utf-8");
          client.println("Server: Arduino");
          client.println("Connnection: close");
          client.println();

          temperatureIndoor = 22.77;
          temperatureOutdoor = 15.55;
          client.print("{\"0\":{\"TemperaturaInterior\":\"");
          client.print(temperatureIndoor);
          client.print("\",\"TemperaturaExterior\":\"");
          client.print(temperatureOutdoor);

          client.print("\"}}");
          client.println();
          break;
        }

      }
    }
    delay(1);
    client.stop();
    Serial.println("client disconnected");
  }
}

I'm trying to get values with the following ajax call:

    $.ajax({
        url: 'http://192.168.1.177/',
        type: 'post',
            data: { tag: 'getData'},
            dataType: 'json',
                  async: false,
                  success: function (data) {

$('#TemperaturaInterior').val(data.TemperaturaInterior).show();
$('#TemperaturaExterior').val(data.TemperaturaExterior).show();

                            }
                        });

If I access directly from the browser to Arduino (192.168.1.177) I get the correct JSON reply from arduino: {"0":{"TemperaturaInterior":"22.77","TemperaturaExterior":"15.55"}}

I'm not getting the values. Any idea? Thanks

NOTE:

This what I get when ask to arduino to give me the values:

Answer 1

This is more of a Stack Overflow question, but I'll help you a bit. The problem has nothing to do with your Arduino per-say. It has more to do with your PHP/Ajax.

Your code is suited for a completely local setup, but pulls from a remote site, which violates some security protocols build into your browser and jQuery. You need to change your code to this:

$.ajax({
    url: 'http://192.168.1.177/',
    type: 'post',
    data: { tag: 'getData'},
    dataType: 'jsonp',
    async: false,
    success: function (data) {
        $('#TemperaturaInterior').val(data.TemperaturaInterior).show();
        $('#TemperaturaExterior').val(data.TemperaturaExterior).show();
        }
    });
(may need slight modifications since you didn't include all PHP/html code)

For more information, see the jQuery documentation, particularly look at data types and what it says about cross-domain json vs jsonp.

Here is a relevant SO question.

Answer 2

Ouch man you are getting burned by CORS. This stack overflow box isn't big enough for me to explain how much of a pain CORS is and how much trouble it will cause you. That being said there is a really good recourse that will help explain how to get this working with a couple of http headers http://enable-cors.org/. Good luck