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:

enter image description here

• Majenko: What language is that you're programming in there? AJAX is a technology, not a language. Also, do you really want that "0" in your AJAX response?
• Mario Cordeiro: No, the "0" is not necessary. I'm using a php page, with Jquery.
• Majenko: My reading of that response says you would have data.0.TemperaturaInterior and data.0.TemperaturaExterior.
• Edgar Bonet: Why are you sending a POST request? A GET would be more appropriate. Also, when you access directly from the browser it's a GET. And you should look at the actual data on the wire (e.g. with a network sniffer, Firebug, the Chrome developer tools, etc...), not just the (failed) rendering on the browser.
• Edgar Bonet: Look at the last error message: it's quite explicit, then google "cross origin resource sharing" and "Access-Control-Allow-Origin". Not specific to Arduino.

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