在WordPress中如何将PHP获取的文章标题传递给JavaScript并作为请求参数使用?

在WordPress中如何将PHP获取的文章标题传递给JavaScript并作为请求参数使用?

本文介绍如何在WordPress中将php获取的文章标题传递给JavaScript,并将其用作ajax请求的参数。这在需要前端利用后端数据时非常实用。

WordPress后台包含众多文章,我们需要获取这些文章标题,并将其作为参数请求外部接口。PHP的get_the_title()函数可以获取文章标题,而jquery的$.ajax()函数则负责接口请求。关键在于如何将PHP变量传递给JavaScript。

WordPress的wp_localize_script()函数可以完美解决这个问题,它允许将PHP变量传递给JavaScript。步骤如下:

首先,使用PHP获取所有文章标题。利用WP_Query类查询所有文章,并用get_the_title()函数提取标题:

立即学习PHP免费学习笔记(深入)”;

$titles = array(); $args = array(     'post_type' => 'post',     'posts_per_page' => -1, ); $query = new WP_Query($args); if ($query->have_posts()) {     while ($query->have_posts()) {         $query->the_post();         $titles[] = get_the_title();     }     wp_reset_postdata(); }

接下来,使用wp_enqueue_script()加载JavaScript文件,并用wp_localize_script()将PHP变量传递给JavaScript:

wp_enqueue_script('my_script', get_template_directory_uri() . '/JS/my_script.js', array('jquery'), '1.0', true); wp_localize_script('my_script', 'my_script_vars', array(     'titles' => $titles, ));

这将把$titles数组作为my_script_vars.titles对象传递到my_script.js文件中。

最后,在my_script.js中,使用my_script_vars.titles访问文章标题,并将其作为AJAX请求的参数:

jQuery(document).ready(function($) {     $.ajax({         type: 'GET',         url: 'your_api_endpoint',         data: {             titles: my_script_vars.titles         },         success: function(response) {             console.log(response);         }     }); });

通过以上步骤,成功地将PHP获取的文章标题传递给JavaScript,并在前端用作AJAX请求的参数,实现了WordPress前后端数据交互。

© 版权声明
THE END
喜欢就支持一下吧
点赞13 分享