在Wordpress中通过XMLHttpRequest加载数据库内容 [英] Loading database content via XMLHttpRequest in Wordpress

问题描述

我创建了一个新的WordPress模板页面。我的想法是，当我点击我的sidebar-div中的链接时，它应该从我的content-div中的数据库加载内容。在一个简单的php页面上它可以工作，但是与我的wordpress模板页面结合使用，它不起作用...

这就是我的代码:(简短版本）

 <？php //模板名称：Weinkarte 
 get_header（）; ？> 
 
< div id =container-sidebar> 
< span id =wineList>< / span> 
< / div> 
 
< div id =sidebar-right> 
< li>< a href ='＃'id ='1'onclick ='loadWine（this.id）'>点击< / a>< / li> 
< / div> 
 
 get_footer（）; 
 
< script> 
函数loadWine（id）
 {
 xmlhttp = new XMLHttpRequest（）; 
 xmlhttp.onreadystatechange = function（）
 {
 if（xmlhttp.readyState == 4&& xmlhttp.status == 200）
 {
 document。的getElementById（ 酒单）的innerHTML = xmlhttp.responseText。 
 
 
 xmlhttp.open（GET，loadWine.php？landID =+ id，true）; //我认为这可能是错误
 xmlhttp.send（）; 
} 
< / script> 
  

感谢您的帮助！ ：）

解决方案

在wordPress中，你必须使用action来进行ajax调用，像这样（基本上在你的functions.php中）

  add_action（'wp_ajax_nopriv_myAjaxFunction'，'myAjaxFunction'）; 
 add_action（'wp_ajax_myAjaxFunction'，'myAjaxFunction'）; 
函数myAjaxFunction（）{
 //从ajax获取数据
 $ landID = $ _POST ['landID']; 
 //其余的代码
} 
  

同样使用 post >而不是 get 在你的javascript文件中有这样的内容

  var data =action = myAjaxFunction& landID =+ id; 
 xmlhttp.open（POST，http://your_site.com/wp-admin/admin-ajax.php，true）; 
 xmlhttp.send（data）;给出的例子只是一个想法，你应该阅读更多的内容并使用  $ b> 
 
 
 jQuery 方便起见。您可以阅读 Codex 和这里是另一篇不错的文章。
 
I have created a new wordpress-template-page.  The idea is, that when I click on a link in my sidebar-div, it should load content from an database in my content-div. On a simple php-page it works, but in combination with my wordpress template-page it doesn't work... 

And that's my code: (short version)
<?php // Template Name: Weinkarte
get_header(); ?>

<div id="container-sidebar">
     <span id="wineList"></span>
</div>

<div id="sidebar-right">
    <li><a href='#' id='1' onclick='loadWine(this.id)'>Click</a></li>
</div>

get_footer();

<script>
function loadWine(id)
{
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("wineList").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","loadWine.php?landID="+id,true); //I think here is probably the fault
xmlhttp.send();
}
</script>
Thanks for any help! :)
解决方案
In wordPress, you have to use action for ajax call, something like this (basically in your functions.php)
add_action( 'wp_ajax_nopriv_myAjaxFunction', 'myAjaxFunction' );  
add_action( 'wp_ajax_myAjaxFunction', 'myAjaxFunction' );
function myAjaxFunction(){  
    //get the data from ajax call  
    $landID = $_POST['landID'];
    // rest of your code
}
Also use post instead of get something like this in you javascript file
var data = "action=myAjaxFunction&landID="+id;
xmlhttp.open("POST","http://your_site.com/wp-admin/admin-ajax.php",true);
xmlhttp.send(data);
Given example is just an idea, you should read more about it and use jQuery for ease. You can read more on Codex and here is another nice article.

                        
这篇关于在Wordpress中通过XMLHttpRequest加载数据库内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！