如何在AngularJS中点击按钮时调用WordPress短代码？

嘿，咱们一步步来搞定这个问题哈。核心需求就是：提交注册表单后，不用刷新整页，就能让那个包含User Meta注册短代码的div重新加载，重置表单或者回到初始状态。下面给你几个可行的方案，你按需选择：

方案1：用WordPress AJAX动态重新加载短代码内容 #

这个方法是通过WordPress的AJAX机制，在注册成功后异步请求服务器重新渲染短代码，再替换掉原来的div内容，完全不用整页刷新。

第一步：在主题的functions.php里添加AJAX处理函数 #

先把这段代码加到你主题的functions.php文件里，用来处理前端的刷新请求：

// 处理AJAX请求，重新渲染注册表单短代码
add_action('wp_ajax_refresh_reg_form', 'refresh_registration_form');
add_action('wp_ajax_nopriv_refresh_reg_form', 'refresh_registration_form'); // 给未登录用户开放权限

function refresh_registration_form() {
    // 可选：添加权限校验，根据你的需求调整
    if (!current_user_can('read')) {
        wp_send_json_error('无操作权限');
        wp_die();
    }
    
    // 重新渲染注册表单短代码
    $form_html = do_shortcode('[user-meta-registration form="New User"]');
    wp_send_json_success($form_html);
    wp_die(); // 必须添加，结束AJAX请求
}

第二步：修改页面的PHP/HTML代码，添加前端处理逻辑 #

把你原来的代码改成下面这样，结合AngularJS或者原生JS来触发刷新：

如果你用AngularJS的写法：

<div ng-controller="RegFormCtrl" ng-show="someBoolean" id="reg-form-container">
    <?php echo do_shortcode('[user-meta-registration form="New User"]');?>
</div>

<script>
// 初始化AngularJS模块（确保和你页面的ng-app名称一致）
angular.module('yourApp', [])
.controller('RegFormCtrl', function($scope, $http) {
    // 定义刷新表单的函数
    $scope.refreshForm = function() {
        $http.post('<?php echo admin_url('admin-ajax.php');?>', {
            action: 'refresh_reg_form'
        }).then(function(response) {
            if (response.data.success) {
                // 替换div里的内容为新渲染的表单
                document.getElementById('reg-form-container').innerHTML = response.data.data;
            }
        });
    };

    // 监听注册成功的提示——这里要根据User Meta插件实际输出的成功提示元素调整
    setTimeout(function() {
        var successMsg = document.querySelector('.um-success'); // 替换成插件实际的成功提示类名
        if (successMsg) {
            // 延迟2秒刷新，让用户能看到成功提示
            setTimeout($scope.refreshForm, 2000);
        }
    }, 1000);
});
</script>

不用AngularJS，用原生JS的写法：

<div ng-show="someBoolean" id="reg-form-container">
    <?php echo do_shortcode('[user-meta-registration form="New User"]');?>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 监听表单提交事件
    var regForm = document.querySelector('#reg-form-container form');
    if (regForm) {
        regForm.addEventListener('submit', function() {
            // 提交后等待1秒，检查是否出现成功提示
            setTimeout(function() {
                if (document.querySelector('.um-success')) { // 替换成插件实际的成功提示类名
                    // 延迟2秒刷新表单
                    setTimeout(refreshRegForm, 2000);
                }
            }, 1000);
        });
    }

    // 定义刷新表单的函数
    function refreshRegForm() {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '<?php echo admin_url('admin-ajax.php');?>');
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onload = function() {
            if (xhr.status === 200) {
                var response = JSON.parse(xhr.responseText);
                if (response.success) {
                    document.getElementById('reg-form-container').innerHTML = response.data;
                }
            }
        };
        xhr.send('action=refresh_reg_form');
    }
});
</script>

方案2：利用User Meta插件的内置钩子（如果支持） #

有些表单插件会提供提交成功后的钩子，咱们可以用这个钩子标记注册成功，然后在页面加载时触发刷新：

第一步：在functions.php里添加钩子处理 #

add_action('user_meta_after_registration', 'mark_reg_success', 10, 3);

function mark_reg_success($user_id, $form_id, $form) {
    // 用会话标记注册成功
    session_start();
    $_SESSION['reg_success'] = true;
}

第二步：修改页面代码判断标记 #

<?php
session_start();
$need_refresh = isset($_SESSION['reg_success']) ? true : false;
// 用完标记就清除，避免重复刷新
if ($need_refresh) unset($_SESSION['reg_success']);
?>

<div ng-show="someBoolean" id="reg-form-container">
    <?php echo do_shortcode('[user-meta-registration form="New User"]');?>
</div>

<script>
<?php if ($need_refresh): ?>
// 页面加载时自动刷新表单
document.addEventListener('DOMContentLoaded', function() {
    refreshRegForm(); // 这里的refreshRegForm函数就是方案1里定义的那个，记得要引入哦
});
<?php endif; ?>
</script>

几个注意点 #

• 记得替换代码里的成功提示类名（比如.um-success），要和User Meta插件实际输出的成功提示元素的类一致，可以用浏览器开发者工具查看。
• 如果用AngularJS，要确保页面已经加载了AngularJS库，并且模块名yourApp和页面的ng-app属性值一致。
• 如果User Meta插件本身是用普通表单提交（会刷新整页），那AJAX方案就没必要了，但根据你的描述，提交后只显示提示没刷新整页，说明插件已经用了AJAX提交，所以上面的方案都适用。

内容的提问来源于stack exchange，提问作者Devashish Rana