Running ReactJS and PHP Together

Question

I'm trying to get a fetch call in React to talk to a PHP script I'm running on MAMP..

For some reason it's giving me errors.. I'm not sure where to go from here..

This is the code I'm using in React:

getPHP = () => {
    var formData = new FormData();
    formData.append('content', 'test2');
    fetch(`http://localhost:8888/phpBackend/demo.php`, {
      method: 'POST',
      headers: {
      },
      body: formData,
    }).then(res => res.json())
    .then(response => {
      console.log('response:');
      console.log(response);
    });
  }
  onSubmit = (e) => {
    e.preventDefault();
    this.getPHP();
}

And my PHP Script:

<?php
    $content = $_POST['content']
    $response = array("success" => true, "message" => $content);

    echo json_encode($response);
?>

I'm getting this error:

FileUploader.js:20 POST http://localhost:8888/phpBackend/demo.php 500 (Internal Server Error)
UserForm._this.getPHP @ FileUploader.js:20
UserForm._this.onSubmit @ FileUploader.js:44
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:201
executeDispatch @ react-dom.development.js:461
executeDispatchesInOrder @ react-dom.development.js:483
executeDispatchesAndRelease @ react-dom.development.js:581
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:592
forEachAccumulated @ react-dom.development.js:562
runEventsInBatch @ react-dom.development.js:723
runExtractedEventsInBatch @ react-dom.development.js:732
handleTopLevel @ react-dom.development.js:4476
batchedUpdates$1 @ react-dom.development.js:16659
batchedUpdates @ react-dom.development.js:2131
dispatchEvent @ react-dom.development.js:4555
interactiveUpdates$1 @ react-dom.development.js:16714
interactiveUpdates @ react-dom.development.js:2150
dispatchInteractiveEvent @ react-dom.development.js:4532
FileUploader.js:25 Uncaught (in promise) SyntaxError: Unexpected end of JSON input
    at FileUploader.js:25

Originally there was a cross domain issue (cors) but that was fixed with an .htaccess file I added:

<IfModule mod_rewrite.c>
    Header add Access-Control-Allow-Origin: "*"
    Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
    Header add Access-Control-Allow-Headers: "Content-Type"

    RewriteEngine on
    RewriteBase /
</IfModule>

Does anyone know why this is throwing errors?

Do you still get the error if you do e.g. array("success" => true, "message" => true); as a test? — Tholle
– Tholle, Commented Aug 1, 2018 at 22:08
View the request / response in Chrome developer tools (network). Inspect the headers and the payload. — eddiewould
– eddiewould, Commented Aug 1, 2018 at 22:18
Does this mean anything to you guys? I'm still beginner level with this stuff.. It looks like the FormData was received? drive.google.com/file/d/1OZcBCEPKqxqT8okjQQMVfHX1P2JqisLH/… — Cmaxster
– Cmaxster, Commented Aug 1, 2018 at 22:27
Quick question, are you able to post to the url via postman or something? I mean this url http://localhost:8888/phpBackend/demo.php — Aritra Chakraborty
– Aritra Chakraborty, Commented Aug 1, 2018 at 22:52

user16547514 · Accepted Answer · 2021-07-28 15:34:11Z

1

You have a typo in the php script on line 2. Your missing a semicolon on the end of the line.

<?php
$content = $_POST['content']; // there you missed the semicolon
$response = array("success" => true, "message" => $content);

echo json_encode($response);?>

answered Jul 28, 2021 at 15:34

user16547514

111 bronze badge

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

Collectives™ on Stack Overflow

Running ReactJS and PHP Together

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related