我知道以前有人问过这个问题，但我找不到具体用例的实质性答案。
Overview
我一直在使用RESTAPI和Vue开发一个基于Wordpress的网站。js作为前端框架。我在获取帖子、显示数据等方面没有问题。
Issue
自Vue以来。js在客户端运行，我在使用需要在php中呈现服务器端的插件/短代码时遇到了一些问题。我正在寻找一种解决方案，在php函数中呈现一个短代码，并将呈现的数据发送到我的前端，最终使用Vue显示它。js。
JS
var http = new XMLHttpRequest();
var url = \'/wp-admin/admin-ajax.php\';
var data = { action: \'my_ajax_shortcode\' };
http.open(\'POST\', url, true);
http.setRequestHeader(\'Content-type\', \'application/x-www-form-urlencoded\');
http.onreadystatechange = function() {
if (http.readyState == 4 && http.status == 200) {
// response......
}
};
http.send(data);
PHP
add_action(\'wp_ajax_my_ajax_shortcode\', \'my_ajax_shortcode()\');
add_action(\'wp_ajax_nopriv_my_ajax_shortcode\', \'my_ajax_shortcode()\');
function my_ajax_shortcode() {
echo do_shortcode(\'[contact-form-7 id="98" title="Contact Test"]\');
die;
}
Results
我不太熟悉Wordpress上下文中的Ajax通信，所以也许有人可以帮助我或给我一些指导。运行此代码时，我的响应通常记录为“0”。虽然我在本例中使用的是联系表单7，但我只是想掌握此操作的一般流程，以便将其应用于其他情况。
谢谢任何帮助或指点都将有助于我理解这个问题。
SO网友:mmarquez
我的解决方案比我想象的要简单。。。。
由于我只是尝试在前端执行短代码，所以我可以将脚本本地化并将短代码作为变量传递：
functions.php
wp_localize_script( \'BUILD-script\', \'sharedData\',
array(
\'ajax_url\' => admin_url( \'admin-ajax.php\' ),
\'mailchimpForm\' => do_shortcode(\'[mc4wp_form id="100"]\'),
\'contactForm\' => do_shortcode(\'[contact-form-7 id="98" title="Contact form 1"]\')
)
);
基本上，我只是将短代码分配给两个变量，并使它们在我的主js包中可用。
build.js
所以现在我可以访问组件中渲染的那些短代码。
export default {
name: \'my-component\',
data() {
return {
mailchimp: \'\',
contact: \'\'
};
},
mounted() {
this.mailchimp = sharedData.mailchimpForm;
this.contact = sharedData.contactForm;
}
};
只需使用Vue v-html指令即可呈现：
<div id="mailchimp" class="chimp--container" v-html="mailchimp"></div>
<div id="contact" class="contact--container" v-html="contact"></div>
希望这能帮助一些人！
