WordPress如何获取div文本值传递给PHP插件查询Notion返回释义

一、前端交互逻辑实现 #

你需要通过JavaScript完成div事件监听、字段属性设置、AJAX请求三个核心动作：

• 先给需要触发查询的div添加统一标识类（示例为notion-query-trigger），给表单输入框添加统一标识（示例为interview-input），给释义展示区域添加标识（示例为meaning-display）
• 监听输入框的聚焦事件，保存当前处于激活状态的输入框
• 监听div的点击事件，若div内容会动态变更则额外使用MutationObserver监听内容变更事件
• 点击/内容变更时获取div文本值，赋值给激活输入框的name属性，再通过AJAX将文本值传给PHP插件

示例JS代码如下：

// 保存当前聚焦的输入框
let activeInput = null;
document.querySelectorAll('.interview-input').forEach(input => {
  input.addEventListener('focus', () => {
    activeInput = input;
  });
});

// 监听div点击事件
document.querySelectorAll('.notion-query-trigger').forEach(div => {
  div.addEventListener('click', async () => {
    if (!activeInput) return;
    // 获取div文本值，去除首尾空格
    const divText = div.textContent.trim();
    // 给激活输入框设置name属性
    activeInput.setAttribute('name', divText);
    
    // 发起AJAX请求调用PHP插件接口，使用WordPress官方AJAX接口地址
    try {
      const res = await fetch(window.notionQuery.ajaxUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: new URLSearchParams({
          action: 'get_notion_meaning', // WordPress AJAX动作名
          nonce: window.notionQuery.nonce, // 安全校验字段
          q: divText
        })
      });
      const meaning = await res.text();
      // 展示返回的释义
      document.querySelector('.meaning-display').textContent = meaning;
    } catch (err) {
      document.querySelector('.meaning-display').textContent = '查询失败，请稍后重试';
    }
  });
});

// 若div内容会动态变更，追加MutationObserver监听
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.target.classList.contains('notion-query-trigger')) {
      // 内容变更后触发和点击事件相同的逻辑即可
      const divText = mutation.target.textContent.trim();
      // 后续逻辑和点击事件一致
    }
  });
});
document.querySelectorAll('.notion-query-trigger').forEach(div => {
  observer.observe(div, { childList: true, characterData: true, subtree: true });
});

二、PHP插件优化 #

原有代码需要适配WordPress的AJAX规范，同时补充安全校验、异常处理逻辑，完整优化后代码如下：

<?php
/*
Plugin Name: Notion释义查询插件
*/

// 注册前端脚本并注入AJAX配置
add_action('wp_enqueue_scripts', 'notion_query_enqueue_assets');
function notion_query_enqueue_assets() {
  // 注册你的JS文件，替换为你实际的JS文件路径
  wp_enqueue_script('notion-query-js', plugin_dir_url(__FILE__) . 'query.js', ['jquery'], '1.0', true);
  // 向JS注入AJAX地址和安全校验nonce
  wp_localize_script('notion-query-js', 'notionQuery', [
    'ajaxUrl' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('notion_query_nonce')
  ]);
}

// 注册AJAX回调，支持登录用户和访客使用
add_action('wp_ajax_get_notion_meaning', 'get_notion_meaning_callback');
add_action('wp_ajax_nopriv_get_notion_meaning', 'get_notion_meaning_callback');
function get_notion_meaning_callback() {
  // 安全校验
  if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'notion_query_nonce')) {
    wp_die('非法请求');
  }
  // 参数校验
  if (empty($_POST['q'])) {
    wp_die('查询参数为空');
  }
  $dataElementName = sanitize_text_field($_POST['q']);

  // Notion API配置
  $databaseId = "BBB";
  $url = "https://api.notion.com/v1/databases/$databaseId/query";
  $token = 'AAAA';
  $version = '2021-08-16';

  // 构造请求参数
  $data_array = [
    'filter' => [
      "property" => "DataElement",
      "title" => ["equals" => $dataElementName]
    ]
  ];
  $data = json_encode($data_array);

  // 发起cURL请求
  $ch = curl_init();
  curl_setopt($ch,CURLOPT_URL,$url);
  curl_setopt($ch,CURLOPT_RETURNTRANSFER, true);
  curl_setopt($ch,CURLOPT_POST, true);
  curl_setopt($ch,CURLOPT_POSTFIELDS,$data);
  curl_setopt($ch, CURLOPT_HTTPHEADER, [
    'Authorization: Bearer ' . $token,
    'Notion-Version: '.$version,
    'Content-type: application/json'
  ]);

  $resp = curl_exec($ch);
  if (curl_error($ch)) {
    $result = curl_error($ch);
  } else {
    $decoded = json_decode($resp, true);
    // 非空判断避免数组索引报错
    if (!empty($decoded['results'][0]['properties']['Meaning']['rich_text'][0]['text']['content'])) {
      $result = $decoded['results'][0]['properties']['Meaning']['rich_text'][0]['text']['content'];
    } else {
      $result = '未找到对应释义';
    }
  }
  curl_close($ch);

  echo $result;
  wp_die();
}

注意事项 #

• 请将代码中的AAAA、BBB替换为你实际的Notion API Token和数据库ID，确保你的Notion集成已经共享了对应数据库
• 不要将Notion API Token硬编码到前端代码中，所有API请求必须走服务端处理避免Token泄露
• 上线前请移除所有测试用的调试代码，确保生产环境的安全性

内容的提问来源于stack exchange，提问作者Luka Tovrloza