WordPress-从vuejs应用程序发送AJAX请求

icomxhvb  于 2022-09-18  发布在  WordPress
关注(0)|答案(2)|浏览(157)

我已经创建了此页面模板,用于将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请求来处理表单数据?

sauutmhj

sauutmhj1#

WP_LOCALIZE_SCRIPT函数通常用于将通用数据从PHP传递到JavaScript。

简单地说,如果你必须将一些数据从php传递到脚本,WordPress随后会添加一个新函数wp_add_inline_script,但当你注册脚本时,wp_localize_script会更好。

此函数需要3个参数:

1.句柄名称--这是您注册的脚本名称。
1.js对象名-可以在js文件中全局使用的对象名
1.数据数组-一个php数据数组,你不需要对它进行json编码,WordPress会为你编码的。

function setup_ajax_vue() {
    wp_register_script( 'vue-css', get_template_directory_uri() . '/dist/assets/index.css' );
    wp_enqueue_style( 'vue-css' );

    wp_register_script( 'vue-js', get_template_directory_uri() . '/dist/assets/index.js', array(), false, true );
    wp_enqueue_script( 'vue-js' );
    wp_localize_script( 'vue-js', 'vue_js_params', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'setup_ajax_vue' );

因此,在您的代码中,您将通过上面的代码使用已注册的脚本来本地化php数据。

注意:您需要先注册脚本,然后进行本地化。

在上面的代码中,我们使用了js对象名vue_js_params,并在数据中传递了ajaxurl

因此,在您的js代码中,您可以使用vue_js_params.ajaxurl访问它,它将在全球范围内可用。

如果你不知道如何在WordPress中注册AJAX回调,那么你可以从教程中学到它,我相信谷歌会有很多关于“如何在WordPress中使用AJAX”的文章

chy5wohz

chy5wohz2#

在您的页面中的某个地方,在您的AJAX调用之前添加了此代码。

<script>
    var ajax_url= "<?php echo admin_url('admin-ajax.php'); ?>";
</script>

因此,您可以:

<center>
        <button style="margin:50px" onclick="do_ajax()">Ajax</button>
    </center>

    <script>
        var url = "<?php echo admin_url('admin-ajax.php'); ?>";
        function do_ajax() {
            var request = new XMLHttpRequest();
            request.open("POST", url + "?action=process_contact_form");
            request.onreadystatechange = function() {
                if(this.readyState === 4 && this.status === 200) {
                    alert(this.responseText);
                }
            };
            var formData = new FormData();
            formData.append("subject", "value");
            formData.append("message", "hello value")
            request.send(formData);
        }   
    </script>

当然也可以使用AXIOS或FETCH。

相关问题