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 时保留的