我已经创建了此页面模板,用于将VUE应用程序集成到现有网站中
<?php
/*
* Template Name: Registration Form
* /
get_header();
?>
<div id="app"></div>
<?php
get_footer();
?>
经过一点调试,我已经解决了VUE路由器无法加载我的应用程序的视图的问题,因为我需要手动设置基本URL。
在我的VUE应用程序中,我将有一个需要在WordPress中处理的自定义登录和注册表。为了实现这一点,我想在VUE应用程序中使用axios发出请求并将数据传递给wp。
我已经阅读了有关admin-ajax.php
的内容,但我对如何使其与VUE一起工作感到有点困惑。在WordPress文档中,建议使用wp_localize_script()
函数将管理员URL传递给需要它的脚本。
我已经在functions.php
文件中创建了一个简单的函数
function setup_ajax_vue(){
wp_register_script('vue-js', get_template_directory_uri() . '/dist/assets/index.js', array(), false, true );
wp_enqueue_script('vue-js');
wp_register_script('vue-css', get_template_directory_uri() . '/dist/assets/index.css');
wp_enqueue_style('vue-css');
}
add_action('wp_enqueue_scripts', 'setup_ajax_vue');
在这个函数中,我将移动到一个插件中,我现在只加载VUE应用程序文件。如何正确集成AJAX处理程序,让VUE应用程序发送AJAX请求来处理表单数据?
2条答案
按热度按时间sauutmhj1#
WP_LOCALIZE_SCRIPT函数通常用于将通用数据从PHP传递到JavaScript。
简单地说,如果你必须将一些数据从php传递到脚本,WordPress随后会添加一个新函数
wp_add_inline_script
,但当你注册脚本时,wp_localize_script
会更好。此函数需要3个参数:
1.句柄名称--这是您注册的脚本名称。
1.js对象名-可以在js文件中全局使用的对象名
1.数据数组-一个php数据数组,你不需要对它进行json编码,WordPress会为你编码的。
因此,在您的代码中,您将通过上面的代码使用已注册的脚本来本地化php数据。
注意:您需要先注册脚本,然后进行本地化。
在上面的代码中,我们使用了js对象名
vue_js_params
,并在数据中传递了ajaxurl
。因此,在您的js代码中,您可以使用
vue_js_params.ajaxurl
访问它,它将在全球范围内可用。如果你不知道如何在WordPress中注册AJAX回调,那么你可以从教程中学到它,我相信谷歌会有很多关于“如何在WordPress中使用AJAX”的文章
chy5wohz2#
在您的页面中的某个地方,在您的AJAX调用之前添加了此代码。
因此,您可以:
当然也可以使用AXIOS或FETCH。