wordpress ajax - 通过wordpress使用AJAX从数据库中获取信息

时间:2014-01-25 03:53:11

标签: php jquery ajax wordpress select

我在http://www.w3schools.com/php/php_ajax_database.asp找到了以下脚本。但我发现很难通过wordpress实现这一点,这在localhost上完美运行但在wordpress失败了。我已经用相同的过程进行了搜索,但仍无法弄清楚。我可以一步一步地询问如何通过wordpress调用ajax脚本吗?

**我的自定义FrontPage * *

<?php
/*
Template Name: Custom Template
*/
?>
<?php
/**
 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */

get_header(); ?>
<script>
function showUser(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
        <div id="primary">
            <div id="content" role="main">

<form>
<select name = "users" onChange = "showUser(this.value)">
                        <?php
                            include 'dbconfig.php';
                            $result=mysql_query("SELECT DISTINCT lastname FROM people ORDER BY lastname ASC;");
                            echo '<option value="">' . 'Select an Agent' . '</option>';

                            while ($row=mysql_fetch_array($result))
                                {
                                echo '<option value="' . $row['lastname'] . '">' . $row['lastname'] . '</option>';
                                }
                        ?>
                        </select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>

            </div><!-- #content -->
        </div><!-- #primary -->

<?php get_footer(); ?>

PHP文件(getuser.php)

<?php
$q = intval($_GET['q']);

include 'dbconfig.php'; // PHP File to login credentials
$sql="SELECT * FROM people WHERE id = '".$q."'";

$result = mysql_query($sql);

echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";

while($row = mysql_fetch_array($result))
  {
  echo "<tr>";
  echo "<td>" . $row['FirstName'] . "</td>";
  echo "<td>" . $row['LastName'] . "</td>";
  echo "<td>" . $row['Age'] . "</td>";
  echo "<td>" . $row['Hometown'] . "</td>";
  echo "<td>" . $row['Job'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

mysql_close($con);
?>

<?php
$q = intval($_GET['q']);

include 'dbconfig.php'; // PHP File to login credentials
$sql="SELECT * FROM people WHERE id = '".$q."'";

$result = mysql_query($sql);

echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";

while($row = mysql_fetch_array($result))
  {
  echo "<tr>";
  echo "<td>" . $row['firstname'] . "</td>";
  echo "<td>" . $row['lastname'] . "</td>";
  echo "<td>" . $row['age'] . "</td>";
  echo "<td>" . $row['hometown'] . "</td>";
  echo "<td>" . $row['job'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

mysql_close($con);
?>

采取的行动: 转换(getuser.php)作为函数然后添加到主题functions.php。然后调用wp add_action hook.please见下文

function getuser(){
  //get the data from ajax() call
  //copied script from getuser.php
    }
  // creating Ajax call for WordPress
   add_action( 'wp_ajax_nopriv_getuser', 'getuser' );
   add_action( 'wp_ajax_getuser', 'getuser' );

非常感谢您的帮助。谢谢。

1 个答案:

答案 0 :(得分:1)

要解决的第一个问题:

那些add_action进入admin-ajax.php,然后可以触发functions.php中的函数,看起来好像你已经在functions.php中编写了这些函数?即使对于面对ajax的客户来说这也是有意义的,尽管这不一定有意义。

其他几点:

至少在开始时考虑使用jquery或ajax库来简化客户端。

考虑在这里使用优秀的JSON api:http://wordpress.org/plugins/json-api/,我手动编写了大量的wp ajax函数,然后发现库解决了我想做的所有工作,而且工作量少得多。

修改

以下是我网站上使用Angular的$ http方法和上面的json-api库的示例方法。此示例获取最新的3个帖子,其中包含指定的自定义属性和值,仅返回一些数据(以节省带宽)。

var baseUrl = http://localhost:3000 // Your Site Url Here

$http({
        method:'GET',
        url:baseUrl,
        params:{
            json:'get_posts',
            count:3,
            include:'excerpt,thumbnail,title,slug,date,categories',
            meta_key: 'featured',
            meta_value: 'projects_yes'
        }
    })
        .success(function(data, status, headers, config){
            console.log(data);
        })
        .error(function(data,status,headers,config){
            console.log(data,',\n', status, headers, config);
        });