找不到对php的Ajax调用，错误404

Question

I'm trying to build my own WordPress theme and it seems to work but I'm having problems with my email form. The code worked when I used it before adapting to WordPress but now it doesn't.

$(function() {
$("#contactForm input,#contactForm textarea").jqBootstrapValidation({
    preventSubmit: true,
    submitError: function($form, event, errors) {
        // additional error messages or events
    },
    submitSuccess: function($form, event) {
        // Prevent spam click and default submit behaviour
        $("#btnSubmit").attr("disabled", true);
        event.preventDefault();
        console.log ('1');

        // get values from FORM
        var name = $("input#name").val();
        var email = $("input#email").val();
        var phone = $("input#phone").val();
        var message = $("textarea#message").val();
        var firstName = name; // For Success/Failure Message

        // Check for white space in name for Success/Fail message
        if (firstName.indexOf(' ') >= 0) {
            firstName = name.split(' ').slice(0, -1).join(' ');
            console.log ('2');
        }

        $.ajax({
            url: "./mail/contact_me.php",
            type: "POST",
            data: {
                name: name,
                phone: phone,
                email: email,
                message: message
            },
            cache: false,
            success: function() {
                // Enable button & show success message
                console.log ('3');

                $("#btnSubmit").attr("disabled", false);
                $('#success').html("<div class='alert alert-success'>");
                $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                    .append("</button>");
                $('#success > .alert-success')
                    .append("<strong>Your message has been sent. </strong>");
                $('#success > .alert-success')
                    .append('</div>');

The JavaScript file is in this route: domain/wp-content/themes/federo/js/contact_me.js

And the PHP file is here: domain/wp-content/themes/federo/mail/contact_me.php

Answer 1

Even though @ruslan-nigmatulin answer will work, it's better to pass that URL (and any other things you need) wp_localize_script function, like so:

wp_localize_script( 'ajax-script', 'ajax_object', array( 'ajax_url' => get_template_directory_uri() . '/mail/contact_me.php');

In this example:
- ajax-script is the handle you've used with wp_enqueue_script
- ajax_object is the name of the object that will be available to your script
- 3rd paramater is an array of values you'd like to pass

Then to get your ajax_url in JS, you will simply do ajax_object.ajax_url . In this case (assuming federo is your current theme), ajax_object.ajax_url will be http://domain/wp-content/themes/federo/mail/contact_me.php

Answer 2

Try to change

url: "./mail/contact_me.php",

into absolute path

url: "http://domain/wp-content/themes/federo/mail/contact_me.php",