ajax->Javascript[POST]->php: passed text param not seen in PHP

Question

Newbie, 1st post (and desperate). I am trying to get a basic html->javascript->ajax(POST)->php transaction (with passed args) to work. [I also tried (GET) but should use POST to mod server state. right].

My problem: whereas a parameter passed via POST (js->ajax->php) DOES appear in the Params list seen in Firefox's Developer Tools-> Network tab, the PHP code does NOT see it (and isset() = 0).

My php code does execute fine... I am debuging by logging stuff to disk file. My SWAG is that there is something wrong with the syntax I use to assemble the param being sent via .send(); [in jsMyFunc() in the example below]. I have tried every possible suggestion found on numerous www.sites and am out of ideas.

Am using Firefox 54.0.1 on W7/64 talking to a Rasperry Pi 3B. Apache is in the mix. I have tons of other code working (HTML+JS+PHP(server side), etc. but this one has stumped me. I am relatively new to most of this so my code is adapted from the <sarcasm>plethora of defect free examples to be found on the www</sarcasm> but I have spent 12+ hours reading, testing, reading, etc. thus this post. I simplified the code to the minimum so maybe one of y'all can help?

Also, (at the risk of being greedy), what is the syntax for sending 2 text params? I was trying to do that for quite a while until I realized that passing a single param didn't work either. I would like to send 2 params to the server: gpio_bit and state (see below).

Please, no need to tell me this is a duplicate bug... been there, read them all. And I really don't want to learn jquery, KISS for a very simple requirement. Any help greatly appreciated.

Main (entire file)

<!DOCTYPE html>
<html>
<head>
  <script src='jsMyJS.js'></script>
</head>
<body>
  <b><button  type='button' onclick='jsMyFunc()'>Test</button></b>
</body>
</html>

Javascript: jsMyJS.js (entire file)

function jsMyFunc() {
  console.log('Executing: jsMyFunc()');
  var gpio_bit = 4;
  var state = 0;
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if( this.readyState == 4 ) {
      if( this.status == 200 ) {
         alert( 'DONE' );
      } else {
         alert( 'ERROR: status = ' + status );
      }
    }
  }
  xhttp.open( 'POST', 'pMyPHP.php', true ); 
  xhttp.setRequestHeader( 'Content-Type', 'text/plain', 'Content-length', state.length ); // Or 'text'

  var myArgs = 'state=' + state; // <<<<<<<<<< HERE ???

  xhttp.send( myArgs );
}

PHP: pMyPHP.php (entire file)

<?php
  // Using file writes to debug server code... sigh...
  $f = fopen("debug.txt", "w");
  fwrite( $f, "\nExecuting: pMyPHP.php()\n" );
  $str = "xxxx";
  fwrite( $f, "str 1 = " . $str . "\n" ); // OK
  if (isset($_POST['state'])) {
    $str = $_POST['state'];
    fwrite( $f, "str 2 = " . $str . "\n" ); // NEVER
  } else {
    fwrite( $f, "str 3 = NULL\n" ); // ALWAYS
  }
  fclose( $f );
?>

Possible duplicate of [Send POST data using XMLHttpRequest](https://stackoverflow.com/questions/9713058/send-post-data-using-xmlhttprequest) — Michel, Aug 05 '17 at 03:09
I'm lazy and just use `$.post( url, {input:"stuff"}, function(data){ ... });` jQuery :-p — ArtisticPhoenix, Aug 05 '17 at 03:11

Jorge SB · Accepted Answer · 2017-08-05T03:35:26.437

I test your code and make a change in Content-Type

xhttp.setRequestHeader( 'Content-Type', 'text/plain', 'Content-length', state.length ); // Or 'text'

Replaced by :

xhttp.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded', 'Content-length', state.length ); // Or 'text'

It writes in debug.txt

Executing: pMyPHP.php()  
str 1 = xxxx  
str 2 = 1

To send 0 in state parameter try : state='0', (zero between quotes).

Source

Example to send 2 params

xhr.send("foo=bar&lorem=ipsum");

score 0 · Answer 2 · answered Aug 05 '17 at 06:09

Many many thanks user2505515. You got them all. I would never have found the Content-Type fix, 'text' or 'text/plain' seemed correct and are documented. The fact I was sending int(0) instead of '0' is something I should have caught... extra eyes really helps. In fact, if I has sent any other non-zero int it would likely have worked (by accident) after the Content-Type fix. So, the fixed (tested) code snippet to send 2 args is:

xhttp.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );
var myArgs = 'state=' +  state.toString() + '&' + 'gpio_bit=' +  gpio_bit.toString();

Michel, I did read that post... I just missed the trees for the forest. Too many hrs reading too many [new to me] code snippets I guess. Thanks for your input too. This is a great site. I have learned a lot.

Glad to see that your problem is solved and yes, we all have tired eyes sometimes:). Now the right thing to do would be to mark @user2505515 answer as accepted. — Michel, Aug 05 '17 at 07:35

ajax->Javascript[POST]->php: passed text param not seen in PHP

2 Answers2