Electron AJAX request return raw PHP

Question

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 problem is most likely a mistake in your WAMP configuration. It seems that PHP is not activated there. — Sirko, Aug 05 '19 at 06:23
Possible duplicate of [PHP code is not being executed, instead code shows on the page](https://stackoverflow.com/questions/5121495/php-code-is-not-being-executed-instead-code-shows-on-the-page) — , Aug 05 '19 at 06:41

score 1 · Accepted Answer · answered Aug 05 '19 at 06:33

1

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.

answered Aug 05 '19 at 06:33

Swapnil Shukla

229
1
8

I'm kinda new to Electron, and like I mentioned above, I put my project folder in ```D:``` drive, different location from the web server (in ```C:``` drive). So does that mean I need to separate my PHP file, which originally in my project folder into the web server in ```C:```? – Switch88 Aug 05 '19 at 06:40
Technically "Yes", Think like this. you only need to make ajax request to server for fetching data. So, for example: if your server is running on "localhost:8080/some-url". Just make the request to the endpoint from your electron application. Don`t forget to enable CORS on your server. Your elector code can reside anywhere u want. – Swapnil Shukla Aug 05 '19 at 07:12

Electron AJAX request return raw PHP

1 Answers1