AJAX调用wordpress模板

我的工作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代码：

  $(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); } }); }); });  

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代码包装到标记中。 当您将JavaScript代码放入HTML中时，这是保留的