0

I am kind of new to Javascript, PHP and AJAX. I searched for a long time for an answer to this problem but couldn't quite find the answer. First off here is my my code:

My index.html file:

<input type="text" id="value" onkeyup="loadDoc(this.value)">
        <p id="demo"></p>
        <p id="demo2"></p>

My test.js file:

function loadDoc(kruispunt) {
  var xhttp;
  xhttp=new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        document.getElementById("demo").innerHTML = kruispunt;
    }
  };
  xhttp.open("POST","link.php?q=" + kruispunt, true);
  xhttp.send("kruispunt");
}
function myFunction(){
var xhttp;
  xhttp=new XMLHttpRequest();
  xhttp.onload = function() {
    if (this.readyState == 4 && this.status == 200) {
         document.getElementById("demo2").innerHTML = this.responseText;
  xhttp.open("GET","link.php", true);
  xhttp.send();
  }
   }
  }

My link.php file:

<?php

 $kruispunt5= file_get_contents('http://fiwarelab.ckan.nl/api/action/datastore_search?   resource_id=0077d99e-127c-4c28-acde-c0f337e13065');
 $kruispunt5 = json_decode($kruispunt5, true);
 $lat5 = json_encode($kruispunt5['result']['records'][4]['latitude']);
 $long5 = json_encode($kruispunt5['result']['records'][4]['longitude']);



 $kruispunt11 = file_get_contents('http://fiwarelab.ckan.nl/api/action/datastore_search?  resource_id=6b39a68b-54d1-4254-a2ce-af59a8856f3f');
 $kruispunt11 = json_decode($kruispunt11, true);
 $lat11 = json_encode($kruispunt11['result']['records'][4]['latitude']);
 $long11 = json_encode($kruispunt11['result']['records'][4]['longitude']);

 $q = $_REQUEST['kruispunt'];
 $x = 0;
 $y = 0;
 if ($q !== "") {
   if ($q === "5"){
      $x = $lat5;
      $y = $long5;
    } else if ($q === "11"){
        $x = $lat11;
        $y = $long11;
   }
 }
  echo json_encode($x);
  echo json_encode ($y);
   ?>

What I want to achieve is that my inputvalue gets stored in "demo" and at the same time to give that parameter (kruispunt) to my .php file. Then I want my .php file figure out what $x and $y is and send that back to myFunction() and put the $x and $y variables from the php file into my "demo2".

If I put 5 as my inputvalue for example, "demo" does return 5 but after that nothings shows in "demo2" so I think there is something wrong with either my POST or my .php file. I somehow don't get an error in my browser, but nothing shows either.

I really hope i made clear what I wanted to achieve and thanks in advance for solving or helping with my problem!

Ramon Brokking
  • 63
  • 2
  • 8

1 Answers1

0

You said q=" + kruispunt. So your query string (why are you making a POST request if you're going to send the data in a query string?) has the key q.

Then you say $q = $_REQUEST['kruispunt'];

The key kruispunt is not q.

Meanwhile, the data you do send in the POST request — xhttp.send("kruispunt"); … is a plain text string and not URL encoded form data.

Quentin
  • 800,325
  • 104
  • 1,079
  • 1,205
  • I thought a post request was the way to go, do you know a better way to do this? – Ramon Brokking Mar 30 '17 at 13:30
  • @RamonBrokking — It's not really clear what you're doing. It looks like you are just getting data, so GET would be more appropriate than POST. That's beside the main point though. When you give something a name, you have to keep referring to it by that name. You won't find it if you look for it using a different name. – Quentin Mar 30 '17 at 13:32
  • thank you, I will try fixing it, if it worked will give you the accepted answer :) – Ramon Brokking Mar 30 '17 at 13:36
  • Would you say that this is the correct way to send javascript to php?: function loadDoc(kruispunt) { var http = new XMLHttpRequest(); var url = "link.php?q="; var params = "q=value"; http.open("GET", url, true); //Send the proper header information along with the request http.setRequestHeader("X-Requested-With", "XMLHttpRequest"); http.onreadystatechange = function() {//Call a function when the state changes. if(http.readyState == 4 && http.status == 200) { document.getElementById("demo").innerHTML = kruispunt; } } http.send(params); } – Ramon Brokking Mar 30 '17 at 13:55
  • You still can't call it `q` in one place and `kruispunt` in the other. – Quentin Mar 30 '17 at 14:02
  • You can't include a POST body in a GET request either. – Quentin Mar 30 '17 at 14:07
  • oh yeah, i deleted the params now so I should have a GET request now right? or is setRequestHeader part of a POST body too? – Ramon Brokking Mar 30 '17 at 14:12
  • `setRequestHeader` sets HTTP headers. Some HTTP headers (like Content-Type) describe the body. `X-Requested-With` is a nasty hack used by people who should be using `Accept` instead … and you're ignoring it on the server so it is entirely pointless. – Quentin Mar 30 '17 at 14:14
  • I am sorry for not being the smartest in js and php and not making it easy for you haha but i would love to find out the problem. The thing I want to do is the following: I got a API URL (in my link.php) which gives me latitude and longitude from 9 different crossroads, every crossroad has a different URL. I am trying to choose my crossroad (number 5 or 11) and get the coordinates from that api that way. I hope you know what I really want to do now and maybe you have a good solution (in code) for me – Ramon Brokking Mar 30 '17 at 14:19
  • The solution is still the same. If you want to call it `q` when you make the request, then look for `q` in the request. If you want to look for `kruispunt` in the request, then call it `kruispunt` in the request. – Quentin Mar 30 '17 at 14:22