Wordpress模板中的AJAX調用

Question

我在將工作中的php / javascript / ajax應用程序放入wordpress主題時遇到問題。 我將其用於我的用戶，因此不在管理面板中使用。

我已經做了什么：我在functions.php中調用了JavaScript文件。 和它的加載罰款。 但是，當我打開主要的php文件時，它不會發出ajax調用。

我有4頁：response.php

• response.php（此程序運行正常。）
• single-page.php（這個也很好用。）
• voedingsschema.js（此程序無需WordPress。）
• function.php（我不知道我是否做對了。）

希望我能提供足夠的信息。

我的模板中的function.php代碼如下所示：

function fitnesszone_child_scripts(){
    wp_enqueue_script( 'voedingsschema js', get_stylesheet_directory_uri() . '/js/voedingsschema.js');
}
add_action( 'wp_enqueue_scripts', 'fitnesszone_child_scripts');

javascript代碼：

<script type="text/javascript">
$(document).ready(function() {

    //##### send add record Ajax request to response.php #########
    $("#FormSubmit").click(function (e) {
            e.preventDefault();
            if($("#contentText").val()==='')
            {
                alert("Please enter some text!");
                return false;
            }

            $("#FormSubmit").hide(); //hide submit button
            $("#LoadingImage").show(); //show loading image



            var myData = {
            content_txt: $('#contentText').val(),
            content_txt2: $('#contentText2').val(),
            };
            jQuery.ajax({
            type: "POST", // HTTP method POST or GET
            url: "http://website.com/wp-content/themes/fitnesszone-child/response.php", //Where to make Ajax calls
            dataType:"text", // Data type, HTML, json etc.
            data:myData, //Form variables
            success:function(response){
                $("#responds").append(response);
                $("#contentText").val(''); //empty text field on successful
                $("#FormSubmit").show(); //show submit button
                $("#LoadingImage").hide(); //hide loading image

            },
            error:function (xhr, ajaxOptions, thrownError){
                $("#FormSubmit").show(); //show submit button
                $("#LoadingImage").hide(); //hide loading image
                alert(thrownError);
            }
            });
    });

    //##### Send delete Ajax request to response.php #########
    $("body").on("click", "#responds .del_button", function(e) {
         e.preventDefault();
         var clickedID = this.id.split('-'); //Split ID string (Split works as PHP explode)
         var DbNumberID = clickedID[1]; //and get number from array
         var myData = 'recordToDelete='+ DbNumberID; //build a post data structure

        $('#item_'+DbNumberID).addClass( "sel" ); //change background of this element by adding class
        $(this).hide(); //hide currently clicked delete button

            jQuery.ajax({
            type: "POST", // HTTP method POST or GET
            url: "http://website.com/wp-content/themes/fitnesszone-child/response.php", //Where to make Ajax calls
            dataType:"text", // Data type, HTML, json etc.
            data:myData, //Form variables
            success:function(response){
                //on success, hide  element user wants to delete.
                $('#item_'+DbNumberID).fadeOut();
            },
            error:function (xhr, ajaxOptions, thrownError){
                //On error, we alert user
                alert(thrownError);
            }
            });
    });

});
</script>

Answer 1

讓我們嘗試這種方式在WordPress中實現Ajax

functions.php

function fitnesszone_child_scripts(){
    wp_enqueue_script( 'voedingsschema_js', get_stylesheet_directory_uri() . '/js/voedingsschema.js' );
    wp_localize_script( 'voedingsschema_js', 'voedingsschema_vars', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'fitnesszone_child_scripts' );

function fitnesszone_implement_ajax(){
    include( TEMPLATEPATH .'/response.php');
}
add_action( 'wp_ajax_fitnesszone', 'fitnesszone_implement_ajax' );
add_action( 'wp_ajax_nopriv_fitnesszone', 'fitnesszone_implement_ajax' );

voedingsschema.js

var contentTxt: $('#contentText').val();
var contentTxt2: $('#contentText2').val();

$.ajax({
    url: voedingsschema_vars.ajaxurl,
    type: 'POST',
    data: 'action=fitnesszone&context_txt=contextTxt&context_txt2=contextTxt2,
    success: function(results){
        // YOUR CODE
    },
});

不要將voedingsschema.js中的javascript代碼包裝到<script></script>標記中。 當您將JavaScript代碼放入HTML時，這是保留的