I'm developing a kiosk application with Electron. Currently, I'm stuck with making an AJAX request to the server with a native Javascript code (no JQuery). Every time I made an AJAX request, it always returned the raw PHP code. Here is my project directory:
SelfService
|- script
|- login.js
|- lib
|- userAuth.php
|- node_modules
|- index.html
|- index.js
|- package.json
|- package-lock.json
In my javascript, I have tried to set the "Content-Type" to "application/json", or following another example of AJAX request on the net, set it to "application/x-www-form-urlencoded" before sending the XMLHttpRequest, but both of them still returned the raw PHP code.
As for the server side, I have already set the header as "Content-Type: application/json" and use json_encode for the result.
On the side note: I installed the Electron on different drive than my web server. I installed WAMP on default location (C:\wamp) while I installed the Electron on D: Drive (I wondered if that actually matters)
index.html:
<body>
<input type="text" id="input_id" value="" />
<button onclick="authenticateID();">Click to authenticate ID</button>
<div id="response"></div>
</body>
/script/login.js:
function authenticateID () {
var xhr = new XMLHttpRequest();
var url = 'lib/userAuth.php'
var params = 'id=' + document.getElementById('input_id').value;
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
// xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.onload = function () {
if (this.readyState == 4 && this.status == 200) {
var xhrResult = JSON.parse(xhr.responseText);
var responseContainer = document.getElementById(response);
responseContainer.innerHTML = xhrResult.isValidID;
}
}
xhr.onerror = function () { alert('Something went wrong') }
xhr.send(params);
}
/lib/userAuth.php:
<?php
header('Content-Type: application/json');
$result['isValidID'] = (!empty($_POST['id'])) ? '1' : '0';
echo json_encode($result);
?>
If the user typed in the ID in the textbox, I expect the output will be either "1" or "0", but when I show the xhr.responseText with alert(xhr.responseText), it returned the whole raw PHP code of lib/userAuth.php
EDIT: Now that's a huge mistake I made. I though Electron has some kind of built-in web servers that can process PHP file, so I put my PHP file in the project folder, which is in a different location from the web server. Now I have separated the PHP script into the web server, how am I supposed to set the URL in var url = 'lib/userAuth.php'? I tried localhost/SelfService/lib/userAuth.php but in error log, it says ERR:FILE_NOT_FOUND
The only reason server is returning PHP code is that your server is not configured properly. Check if your server files resides in localhost server folder.