(Jquery) 404 error when trying to find php file with ajax

Question

I've been trying to fix this for the past 2 hours, but I haven't been able to fix it. So I have the current filesetup:

classes
-html
--index.html
--front_gallery.php
-javascript
--gallary.js

And I've been following the tutorial here: http://webdevelopingcat.com/jquery-php-beginner-tutorial-ajax/, and I've followed it almost exactly. I'm currently just running the site off the computer.

So, if I run it off the Adobe Brackets live preview, I get the 404 error, saying that the file is not found. However, if I run it directly, I get this error:

 XMLHttpRequest cannot load file:///C:/Users/myaka_000/Dropbox/Public/dylan_ferris_website/classes/html/front_gallery.php. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.

Here is the gallery.js code:

$(document).ready(function() {

$(function() {
    $("#contact").submit(function(e) {
        e.preventDefault();

        var formData = $(this).serialize();
        window.console.log( formData )

        $.ajax({
            type: "POST",
            url: "front_gallery.php",
            data: formData,
            success: function(resp){
                window.console.log(resp);
            }
        });
    });
});


});

front_gallery.php:

<?
print_r( $_POST );

Answer 1

You are trying to POST this file, assuming they are in the same directory, but it's wrong.

Try to replace

url: "front_gallery.php",

with

url: "../html/front_gallery.php",

Answer 2

You try replace:

url: 'front_gallery.php"

with

url: '/front_gallery.php"