Call .php file with an ajax request - wordpress

0
votes

I am trying to call a php file from an ajax request in wordpress. The problem I am encountering is that the ajax request requires a path to the php file. I am unsure of where to place this php file in my wordpress installation. Further, this file cannot be included inline because I need to call this php file only when the user decides to call it. I don't use jquery right now but would be open to using it as I'm pretty sure that's client side only so the server wouldn't have to be involved.

As an example of something I would like to do let's try this with a form. This example was taken from http://thisinterestsme.com/ajax-form-submission-php/.

I would include this in the webpage. 

<html>
    <head>
        <meta charset="UTF-8">
        <title>Example Ajax PHP Form</title>
    </head>
    <body>

        <form id="my_form_id">
            Your Email Address: <input type="text" id="email" /><br>
            <input type="submit" />
        </form>

        <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
        <script>
            $(document).ready(function(){
                $('#my_form_id').on('submit', function(e){
                    //Stop the form from submitting itself to the server.
                    e.preventDefault();
                    var email = $('#email').val();
                    $.ajax({
                        type: "POST",
                        url: 'submission.php',
                        data: {email: email},
                        success: function(data){
                            alert(data);
                        }
                    });
                });
            });
        </script>
    </body>
</html>

Then elsewhere on the server I would have this file. The problem is I don't know where to place this file or what path to give the ajax request above. 

<?php
$emailAddress = false;
if(isset($_POST['email'])){
    $emailAddress = $_POST['email'];
}

echo 'Received email was: ' . $emailAddress;
?>
2
javascriptphpjqueryajaxwordpress

2 Answers

1
votes

Let's say you have this php:

<?php
 $emailAddress = false;
 if(isset($_POST['email'])){
    $emailAddress = $_POST['email'];
 }

 echo 'Received email was: ' . $emailAddress;
?>

You should name this file as page-submission.php and save it where your functions.php is located, then create a blank page name "submission". You can now then call this file in your ajax as /submission.

Here's the visual hierarchy how it works:

enter image description here

1
votes

You can add PHP functions to your functions.php file which can be easily executed from ajax:

function post_email_address(WP_REST_Request $request){
  return 'Received email was: ' . $request['email'];
}

add_action('rest_api_init', function(){
  register_rest_route( 'foo/v1', '/postEmail', array(
    'methods' => 'POST',
    'callback' => 'post_email_address',
  ));
});

Then in your front end:

  $(function(){
    $('#my_form_id').submit(function(e){
      //Stop the form from submitting itself to the server.
      e.preventDefault();
      var email = $('#email').val();
      $.post("/wp-json/foo/v1/postEmail", {
        email: email
      },function(data){
        console.log(data);
      });
    });
  });

"foo" is the namespace, you could use something more relevant to your app.