Wordpress模板中的AJAX调用 [英] AJAX call in wordpress template

问题描述

我在将工作的php/javascript/ajax应用程序放入wordpress主题时遇到问题.我将它用于我的用户，而不是在管理面板中使用.

I got a problem with getting my working php/javascript/ajax application into my wordpress theme. I use it for my users so not in the admin panel.

我已经做过的事情: 我在functions.php中调用了JavaScript文件.和它的加载罚款.但是，当我打开主要的php文件时，它不会发出ajax调用.

What I already did: I called the JavaScript file in my functions.php. And its loading fine. But when I open my main php file it doesn't make the ajax call.

我有4页:response.php

I have 4 pages: response.php

• response.php(这个很好用.)
• single-page.php(这个也很好用.)
• voedingsschema.js(此程序无需使用wordpress.)
• function.php(我不知道我是否做对了.)

希望我能提供足够的信息.

I hope I've given enough information.

模板中的function.php代码如下:

The function.php code from my template looks like this:

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代码:

The javascript code:

<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>

推荐答案

让我们尝试这种在WordPress中实现Ajax的方法

Let's try this way for implementing ajax in WordPress

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

Don't wrap javascript code in voedingsschema.js into <script></script> tag. This is reserved when you put javascript code inside your HTML

这篇关于Wordpress模板中的AJAX调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！