使用xampp在wordpress中使用Jquery调用php函数

Question

I'm trying to do some basic stuff but my php code seems not to be called.

I have a button with an onclick event with points to a js function

<button type="button" onclick="tryphp()">go!</button>

and this is in my index.php file.

Then I have a subfolder called js with inside my js file and the function is as follows

function tryphp() {

jQuery.ajax({
        url: 'php/try.php',
        success: function (response) {//response is value returned from php (for your example it's "bye bye"
            alert('success!!!!');
        }
    });

}

finally, I have another subfolder "php" with inside my try.php

<?php

echo 'hello';

?>

I expect the button to fire a "success!!!!" when clicked but nothing happens. I'm trying to figure out if the error is in the "url" paramether of the ajax call?

The file structure is as below

/main/index.php
/main/js/file.js
/main/php/try.php

Any help would be great!

Last but not least, my functions.php file is as follows

    <?php

function newtheme_script_enqueue() {
    wp_enqueue_style('style1', get_template_directory_uri() . '/css/newtheme.css', array(), '1.0.0', 'all');
    wp_enqueue_script('script1',get_template_directory_uri() . '/js/newtheme.js', array(), '1.0.0', TRUE);
    wp_enqueue_script('script1',get_template_directory_uri() . '/js/jquery.js', array(), '1.0.0', TRUE);
}

add_action('wp_enqueue_scripts','newtheme_script_enqueue');

and inside jquery.js I have downloaded the compressed version of jquery.

thanks in advance!

-----------UPDATE------------ SOLVED!

There were 2 mistakes:

-i did not specify the dependency in the script enqueue

wp_enqueue_script('script1',get_template_directory_uri() . '/js/newtheme.js', array('jquery'), '1.0.0', TRUE);

-the path to the php file was missing the "template directory" part

Thanks everybody!

Answer 1

First of all you have to know that Wordpress integrate ajax as well.

On file functions.php you must have the function that fires out results to ajax calls

add_action( 'wp_ajax_my_action', 'my_action_callback' );

function my_action_callback() {
    global $wpdb; // this is how you get access to the database

    $whatever = intval( $_POST['whatever'] );

    $whatever += 10;

        echo $whatever;

    wp_die(); // this is required to terminate immediately and return a proper response
}

And on your javascript file there should be something like:

jQuery(document).ready(function($) {

        var data = {
            'action': 'my_action',
            'whatever': 1234
        };

        // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
        jQuery.post(ajaxurl, data, function(response) {
            alert('Got this from the server: ' + response);
        });
    });

Please read reference at this link that's made for plugins but works for themes as well.