Javascript cannot find php file on localhost

Question

I am trying to send string data to a php script on localhost:8080 to be saved, but the Javascript function cannot find the php file and gives a 404 error.

This is the Javascript:

var data = new FormData();
data.append("data" , myStringData);
var xhr = new XMLHttpRequest();
xhr.open('POST', "http://localhost:8080/Source/ServerInputManager.php", true);
xhr.send(data);

This is the ServerInputManager.php script:

<?php
if (!empty($_POST['data'])) {
    $data = $_POST['data'];
    $fname = "NewFile.txt";

    $file = fopen($fname, 'w'); // Creates new file
    fwrite($file, $data);
    fclose($file);
}
?>

I know the php file exists because I can download it from that URL in chrome. I can also read the contents with a GET request using that URL. But whenever I try to use POST, it gives a 404 error. I am not using any php libraries, but I am using node to run a server.js script.

This is the file structure:

|- index.html
|- index.css
|- server.js (ran by node)
+- Source
   |- InputManager.js (contains the javascript code)
   +- ServerInputManager.php (contains the php code)

I've also tried using these directories:

http://localhost:8080/Source/ServerInputManager.php
http://localhost:8080/ServerInputManager.php
localhost:8080/Source/ServerInputManager.php
localhost:8080/ServerInputManager.php
/Source/ServerInputManager.php
Source/ServerInputManager.php
/ServerInputManager.php
ServerInputManager.php

But they all gave 404 errors. What am I doing wrong?

You haven't provided enough info. 1) Are you using any type of PHP framework or library? 2) can you provide an idea of your file structure on the server. — Randy Casburn
– Randy Casburn, Commented Jul 2, 2019 at 17:49
Ok now with your including your file structure: so are you using Express as your server? Do you have app.use() or app.get() and app.post() in your server.js file? — Randy Casburn
– Randy Casburn, Commented Jul 2, 2019 at 18:01
I'll just say it making a ton of assumptions: you have no POST "route" to: /Source/ServerInputManager.php in your Express router setup. — Randy Casburn
– Randy Casburn, Commented Jul 2, 2019 at 18:05
I didn't write the server.js file, but it does have a few app.use() and app.get() calls. None of them are related to the ServerInputManager.php script or the /Source folder. — Daniel Williams
– Daniel Williams, Commented Jul 2, 2019 at 18:08
Well, I suppose you've discovered that you cannot copy-n-paste a file, launch a server and expect things just to work without understanding how the moving parts fit together. Perhaps you can start here (focusing on the part about "What are Routes"): guru99.com/node-js-express.html — Randy Casburn
– Randy Casburn, Commented Jul 2, 2019 at 19:31

Martín Zaragoza · Accepted Answer · 2019-07-02 17:46:56Z

1

I guess this js file runs on a client browser and it was served by the same server that holds your php app.

If that's the case, then you should expose an endpoint on the server side that expects POST requests on some url like /input (for example).

Then your js code should be:

xhr.open('POST', "/input", true);
xhr.send(data);

Remember: you don't perform POST requests directly to php files but to a server that works with php. The server shall receive the POST request on /input and delegate the processing of said request to ServerInputManager.php (or delegate all requests to ServerInputManager.php and only process POST requests on /input).

Hope this helps

answered Jul 2, 2019 at 17:46

Martín Zaragoza

1,82712 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Daniel Williams Over a year ago

How does the server know what script to delegate the request to?

Martín Zaragoza Over a year ago

Well that depends on your php app and what framework you're using. If you're using something like laravel then you would have a file with routes like Route::post('/input', function () { doSomething(); // calls logic on ServerInputManager.php });

Martín Zaragoza Over a year ago

Check this tutorial for a basic crud app with php and laravel: appdividend.com/2019/03/08/…

Randy Casburn Over a year ago

And if the OP is not using a framework like Laravel?

Martín Zaragoza Over a year ago

Then you will have to handle routing manually using pure php. Here's how to handle data received: tutorialspoint.com/php/php_get_post.htm Here's how to handle routing: joshtronic.com/2015/05/24/basic-page-routing-in-php

|

Daniel Williams · Accepted Answer · 2019-07-03 16:45:58Z

To answer my own question,

I found Randy Casburn's comment most useful

you have no POST 'route' to /Source/ServerInputManager.php in your Express router setup.

Although I did not exactly solve the problem, I found another way to get to the same result.

This is the new Javascript code:

fetch("http://localhost:8080/targetInput", {
    method: 'POST',
    body: myStringData,
}).then(response => {
    console.log(response);
})

This is what I added to my server.js script:

var fs = require('fs');
var app = express();
app.post('/targetInput', function(request, response) {
    request.on('data', function(data) {
        data = data.toString();
        // Do whatever with the string data on the server

        response.end("Success!");
    });
});

The php file is no longer used.

Collectives™ on Stack Overflow

Javascript cannot find php file on localhost

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related