子比主题Bootstrap模态框在AJAX提交后自动关闭模态框的方法

我们在开发子比主题会遇到在使用模态框提交完成后模态框没有自动关闭的问题，那么其实这个问题很好解决，因为子比主题已经写了处理某种异步操作（如Ajax请求）的成功回调的函数，我们只需要在前端中加入相应的代码即可解决！

子比主题后端JS在处理AJAX请求回调的函数：

            success: function (n) {
                var ys = n.ys ? n.ys : n.error ? 'danger' : '';
                notyf(n.msg || '操作成功', ys, '', notyf_id);
                miniuploaded(n.no_preview_reset);
                if (n.hide_modal) {
                    $(_this.parents('.modal')[0]).modal('hide');
                }
                if (n.url && n.replace_img) {
                    $('img' + n.replace_img).attr('src', n.url);
                }
                if (n.reload) {
                    if (n.goto) {
                        window.location.href = n.goto;
                        window.location.reload;
                    } else {
                        window.location.reload();
                    }
                }
                _this.trigger('miniuploaded', n, form);
            },

1. 函数定义:
   • success: function (n) {...}: 这是一个成功回调函数的定义，其中n是从服务器返回的响应对象。
2. 状态判断与通知显示:
   • var ys = n.ys ? n.ys : n.error ? 'danger' : '';: 这行代码用于决定通知消息的类型。如果响应对象n中有ys属性，则使用该属性的值；如果没有ys但有error属性，则将类型设置为'danger'；否则，类型为空字符串。
   • notyf(n.msg || '操作成功', ys, '', notyf_id);: 使用notyf函数显示通知消息。如果响应对象n中有msg属性，则显示该消息；否则，默认显示'操作成功'。ys表示通知的类型，notyf_id可能是用于标识特定通知的ID。
3. 处理上传后的状态:
   • miniuploaded(n.no_preview_reset);: 这可能是一个自定义函数，用于处理上传完成后的一些UI逻辑，例如重置预览区域。具体行为取决于n.no_preview_reset的值。
4. 模态框处理:
   • if (n.hide_modal) {$(_this.parents('.modal')[0]).modal('hide');}: 如果响应对象n中的hide_modal为真，则隐藏当前触发事件元素所在的最近的模态框。
5. 图片替换:
   • if (n.url && n.replace_img) {$('img' + n.replace_img).attr('src', n.url);}: 如果响应中包含url和replace_img属性，则将选择器匹配到的img元素的src属性替换为n.url的值。
6. 页面重载与跳转:
   • if (n.reload) {...}: 如果需要重新加载页面（n.reload为真），则根据是否指定了跳转地址(n.goto)来决定是直接重新加载当前页面还是跳转到新的URL。
     • window.location.href = n.goto; window.location.reload;: 首先改变当前页面的URL为n.goto指定的地址，然后尝试重新加载页面。这里有一个小错误，window.location.reload应该是一个函数调用（window.location.reload();），而不是一个属性。
7. 自定义事件触发:
   • _this.trigger('miniuploaded', n, form);: 在当前触发事件的元素上触发一个名为miniuploaded的自定义事件，并传递响应对象n和表单对象form作为参数。

上面代码中的第四条就包含了，关于模态框的处理方法。

实战应用：

• 下面是我在写子比主题反馈插件的相关代码
• 在代码中我加入了一个判断zib_send_json_success(array('message' => '反馈成功', 'hide_modal' => true));，在反馈成功的时候会向服务器返回包含"hide_modal": true的响应
• 当用户点击提交按钮并且服务器处理成功时，前端JavaScript将接收到一个包含"hide_modal": true的响应，然后后端子比主题在处理模态框自动关闭的JS函数中，收到了"hide_modal": true的响应，就会隐藏模态框。

function add_ajax_feedback() {
    $user_id = get_current_user_id();
    if (!$user_id) {
        zib_send_json_error('登录失效，请刷新页面后重试');
        return; // 使用return代替exit，以便于单元测试和代码维护
    }

    // 从POST请求中获取数据，并进行初步的清洗
    $article_url = isset($_POST['article_url']) ? trim($_POST['article_url']) : '';
    $pan_title = isset($_POST['pan_title']) ? trim($_POST['pan_title']) : '';
    $pan_url = isset($_POST['pan_url']) ? trim($_POST['pan_url']) : '';

    if (empty($article_url)) {
        zib_send_json_error('请输入文章网址');
        return;
    }
    
    if (empty($pan_title)) {
        zib_send_json_error('请输入失效网盘标题');
        return;
    }

    if (empty($pan_url)) {
        zib_send_json_error('请输入失效网盘链接');
        return;
    }

    global $wpdb;
    $table_name = $wpdb->prefix . 'feedback_form_data';

    // 防止SQL注入，使用$wpdb->prepare方法
    // 检查是否已经有相同的反馈
    $query = $wpdb->prepare("SELECT COUNT(*) FROM $table_name WHERE article_url = %s AND pan_url = %s", $article_url, $pan_url);
    $exists = $wpdb->get_var($query);

    if ($exists > 0) {
        zib_send_json_error('已经有人反馈啦');
        return;
    }

    if (zib_user_is_ban($user_id)) {
        zib_send_json_error('封禁用户禁止提交');
        return;
    }

    // 准备插入数据
    $data = array(
        'user_id' => $user_id,
        'article_url' => $article_url,
        'pan_title' => $pan_title,
        'pan_url' => $pan_url,
        'timestamp' => current_time('mysql', 1)
    );

    $format = array('%d', '%s', '%s', '%s', '%s'); // 根据数据类型定义格式，例如user_id是整数

    $result = $wpdb->insert($table_name, $data, $format);
if ($result) {
    // 反馈成功，要求前端隐藏模态框
    zib_send_json_success(array('message' => '反馈成功', 'hide_modal' => true));
} else {
    zib_send_json_error('反馈失败，请稍后重试');
}
}

add_action('wp_ajax_add_feedback', 'add_ajax_feedback');
add_action('wp_ajax_add_wxr_blog_qq', 'add_ajax_feedback');

具体代码：

if ($result) {
    // 反馈成功，要求前端隐藏模态框
    zib_send_json_success(array('message' => '反馈成功', 'hide_modal' => true));
} else {
    zib_send_json_error('反馈失败，请稍后重试');
}