jQuery AJAX simple PHP Post not working

Question

I've got a very basic one today! I'm trying to post from jQuery to a PHP file hosted on localhost.

My JS:

$("#searchNameButton").click(function() {
var name = $("#searchNameText").val();
 $.ajax({
        type: 'POST',
        url: 'localhost:8080/getNameInfo.php', // -> this works fine from the browser
        // data: { name: name }, -> commented out
        success: function(){
            alert('request successful');
        },
        error: function(xhr, textStatus, errorThrown){
            alert('request failed');
        }
  })
});

My PHP file (getNameInfo.php), a very basic one for testing:

<?php
  echo 'TEST';
?>

In jQuery, it will always bring me to error, saying 'Internal Server Error'. I am using Ripple Emulator and this is what appears in the console:

POST https://rippleapi.herokuapp.com/xhr_proxy?tinyhippos_apikey=ABC&tinyhippos_rurl=localhost%3A8080/getNameInfo.php 500 (Internal Server Error)

I assume it has to do more with this than with what's written in the files. Any advice? Thanks!

EDIT: Found this: LINK but it won't fix my issue. If I do what it says here, I won't get any error thrown ("" instead) but will still fail.

EDIT 2: If I set Cross-Domain Proxy to Local in Ripple (that's suggested in the link above) I get

OPTIONS http://localhost:4400/ripple/xhr_proxy?tinyhippos_apikey=ABC&tinyhippos_rurl=http%3A//localhost%3A8080/getNameInfo.php net::ERR_CONNECTION_REFUSED

EDIT 3: Changed my URL to local

C://Mobile//Cross-Platform//TestApp//www//php//getNameInfo.php

and it's working now. Have no idea how to make it work on localhost. BUt will go with this now, as it's only a learning app.

Answer 1

Add a header access control at top of getNameInfo.php file :

header('Access-Control-Allow-Origin: *');