Manipulate retrieved ajax data in php

Question

I made a basic ajax request to 2 variables. I want the values to be sent and manipulated in the back-end in order to use them in a database query. All that should happen on page load. My main.js code:

main.js file

var lat =  21.458965;
var lng =  -11.336985;
jQuery.ajax({
        type:"POST",  
        url: ajaxurl,                   
        data: {'action':'func',
               'lat':lat,
               'lng':lng}, 
        success:function(data){
                // note that i don't want the data to return back to the front-end.     
                        },
                        error:function(errorThrown){
                            console.log(errorThrown);
                        }
                    });
        }

functions.php

wp_register_script( 'main', plugin_dir_url( __FILE__ ).'js/main.js', array( 'jquery' ) );
wp_enqueue_script( 'main' );

function func(){
    if(isset($_REQUEST)){
            //i tried to retrieve using $_POST and $_GET but the 2 arrays where empty.
            // i need to retrieve  both vars and take them out of the function then use them in a db query.

    }
}
add_action('wp_ajax_func', 'func');
add_action('wp_ajax_nopriv_func', 'func');

What i wanted here is to send data (2 int variables to be specific) from javascript file to functions.php so any other way to do that please tell me about it.

To do that i created a form with 2 hidden input elements using JS then submit it with $('form').submit(); but the page was loading twice(the normal page load and the submit reload).

Answer 1

Yes you should use die(); in ajax function call, but because you're not returning data and don't care what is returned it's not necessary

You should be using nonce, it's good practice to get used to always using it regardless of the situation.

http://codex.wordpress.org/WordPress_Nonces http://codex.wordpress.org/AJAX_in_Plugins

You should not be using a function called func, name it something specific to your setup, ie process_my_lat_lng

To solve the problem of the form being submitted twice, put the ajax call in a function and then call the function on page load:

jQuery(document).ready(function($){
    processMyLatLng();
});

function processMyLatLng() {
    var lat = 21.458965;
    var lng = -11.336985;
    jQuery.ajax( ajaxurl, {
        type: 'POST',
        data: {
            'action': 'func',
            'lat': lat,
            'lng': lng
        },
        success: function(data) {
            // note that i don't want the data to return back to the front-end.
        },
        error: function(errorThrown) {
            console.log(errorThrown);
        }
    });
}

Answer 2

when form (or other) data is submitted via AJAX, it can be accessed via the $_POST or $_GET variables depending on the method used. In your case, you are using the post method so you can access your 'lat' and 'lng' with $_POST['lat'] and $_POST['lng'] and manipulate them as needed.