Ethernet + Javascript

Projects Networking, Protocols, and Devices
1

Hello, I have an arduino uno, ethernet shield with SD so, my goal is to make this:

from an external HTML file (on a xampp server, for example) send a POST to arduino, arduino reads the post and send an answer to the HTML for example a string, at this point the HTML shows the answer in a div

so I am using HTML, JavaScript( jQuery library )

my arduino has the ip on lan 192.168.1.177
my xampp server has the ip on lan 192.168.1.195

so, I has wrote this code

file.html

<!DOCTYPE html>
<html>
<head>
 <script src="jquery-1.7.1.js"></script>
 <script>
 
 function invia() {
	 $.ajax({
       type: "POST",
       data: "pinD3",
       dataType: "text/html",
       cache: false,
       url: "http://192.168.1.177/",
       success: function( r ){
		 $( "#result" ).html( r );
       },
       error: function(){$( "#result" ).html("error");}
	 });
   };

 </script>
</head>
<body>
 <input id="test" onclick="invia()" type="button" value="Invia"/>
 <div id="result"></div>
</body>
</html>

arduino sketch (in this sketch I'm sending a answer to HTML file only, nothing else)

#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()
{
  Ethernet.begin(mac, ip);
  server.begin();
}

void loop()
{
  // listen for incoming clients
  EthernetClient client = server.available();
  if (client) {

          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          //client.println();
          client.println("answer"); 
          client.println();     
    
    // give the web browser time to receive the data
    delay(1);
    // close the connection:
    //client.flush();
    client.stop();
  }
}

and here is the problem, when I press the button "Invia" these one is writing into the result div "error", with other tests I have read the POST into the arduino and make a digitalPin LOW or HIGH, so the POST arrive at arduino but the answer don't arrive to the html file

If anyone can help me please, it's a project for an exam, thaks =(

2

Test code for making an arduino pin hi/lo via a web page.

//zoomkat 12-08-11, combined client and server
//simple button GET with iframe code
//for use with IDE 1.0
//open serial monitor and send an g to test client and
//see what the arduino client/server receives
//web page buttons make pin 4 high/low
//use the \ slash to escape the " in the html 
//address will look like http://192.168.1.102:84 when submited
//for use with W5100 based ethernet shields

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

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
IPAddress ip(192,168,1,102); // ip in lan
IPAddress gateway(192,168,1,1); // internet access via router
IPAddress subnet(255,255,255,0); //subnet mask
IPAddress myserver(208,104,2,86); // zoomkat web page
EthernetServer server(84); //server port
EthernetClient client;
String readString; 

//////////////////////

void setup(){

  pinMode(4, OUTPUT); //pin selected to control
  Ethernet.begin(mac, ip, subnet, gateway); 
  server.begin();
  Serial.begin(9600); 
  Serial.println("server/client 1.0 test 12/08/11"); // keep track of what is loaded
  Serial.println("Send an g in serial monitor to test client"); // what to do to test client
}

void loop(){
  // check for serial input
  if (Serial.available() > 0) 
  {
    byte inChar;
    inChar = Serial.read();
    if(inChar == 'g')
    {
      sendGET(); // call sendGET function
    }
  }  

  EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();

        //read char by char HTTP request
        if (readString.length() < 100) {

          //store characters to string 
          readString += c; 
          //Serial.print(c);
        } 

        //if HTTP request has ended
        if (c == '\n') {

          ///////////////
          Serial.println(readString); //print to serial monitor for debuging 

            //now output HTML data header
          if(readString.indexOf('?') >=0) { //don't send new page
            client.println("HTTP/1.1 204 Zoomkat");
            client.println();
            client.println();  
          }
          else {
            client.println("HTTP/1.1 200 OK"); //send new page
            client.println("Content-Type: text/html");
            client.println();

            client.println("<HTML>");
            client.println("<HEAD>");
            client.println("<TITLE>Arduino GET test page</TITLE>");
            client.println("</HEAD>");
            client.println("<BODY>");

            client.println("<H1>Zoomkat's simple Arduino 1.0 button</H1>");

            client.println("<a href=\"/?on\" target=\"inlineframe\">ON</a>"); 
            client.println("<a href=\"/?off\" target=\"inlineframe\">OFF</a>"); 

            //client.println("<IFRAME name=inlineframe src=\"res://D:/WINDOWS/dnserror.htm\" width=1 height=1\">");
            client.println("<IFRAME name=inlineframe style=\"display:none\" >");          
            client.println("</IFRAME>");

            client.println("</BODY>");
            client.println("</HTML>");
          }

          delay(1);
          //stopping client
          client.stop();

          ///////////////////// control arduino pin
          if(readString.indexOf("on") >0)//checks for on
          {
            digitalWrite(4, HIGH);    // set pin 4 high
            Serial.println("Led On");
          }
          if(readString.indexOf("off") >0)//checks for off
          {
            digitalWrite(4, LOW);    // set pin 4 low
            Serial.println("Led Off");
          }
          //clearing string for next read
          readString="";

        }
      }
    }
  }
} 

//////////////////////////
void sendGET() //client function to send/receie GET request data.
{
  if (client.connect(myserver, 80)) {
    Serial.println("connected");
    client.println("GET /~shb/arduino.txt HTTP/1.0");
    client.println();
  } 
  else {
    Serial.println("connection failed");
    Serial.println();
  }

  while(client.connected() && !client.available()) delay(1); //waits for data
  while (client.connected() || client.available()) { //connected or data available
    char c = client.read();
    Serial.print(c);
  }

  Serial.println();
  Serial.println("disconnecting.");
  Serial.println("==================");
  Serial.println();
  client.stop();

}
3

Good start code, but note two things:

  1. Pin 4 is connected to the SD card on the W5100 shield, so you will need to go through the zoomcat script and change that to YOUR pin,
  2. Just beef up the initial setup.

replace:

void setup(){

  pinMode(4, OUTPUT); //pin selected to control
  Ethernet.begin(mac, ip, subnet, gateway); 
  server.begin();
  Serial.begin(9600); 
  Serial.println("server/client 1.0 test 12/08/11"); // keep track of what is loaded
  Serial.println("Send an g in serial monitor to test client"); // what to do to test client
}

With:
Put this at the start

#include <pins_arduino.h>
// pin 4 is the SPI select pin for the SDcard
const int SD_CS = 4;
// pin 10 is the SPI select pin for the Ethernet
const int ETHER_CS = 10;

Replace the setup routine:

void setup(){
  Serial.begin(9600); 

  pinMode(SS_PIN, OUTPUT);	// set the SS pin as an output
                                // (necessary to keep the board as
                                // master and not SPI slave)
  digitalWrite(SS_PIN, HIGH);	// and ensure SS is high

  // Ensure we are in a consistent state after power-up or a reset
  // button These pins are standard for the Arduino w5100 Rev 3
  // ethernet board They may need to be re-jigged for different boards
  pinMode(ETHER_CS, OUTPUT); 	// Set the CS pin as an output
  digitalWrite(ETHER_CS, HIGH); // Turn off the W5100 chip! (wait for
                                // configuration)
  pinMode(SD_CS, OUTPUT);       // Set the SDcard CS pin as an output
  digitalWrite(SD_CS, HIGH); 	// Turn off the SD card! (wait for
                                // configuration)
  Ethernet.begin(mac, ip, subnet, gateway); 
  server.begin();
  Serial.println("server/client 1.0 test 12/08/11"); // keep track of what is loaded
  Serial.println("Send an g in serial monitor to test client"); // what to do to test client
}

Specifically because it takes care of certain situations related to power up / warm start rest button.