基于Outlook API的多邮件批量入库脚本问题求助

看起来你遇到的核心问题是全局变量作用域污染和按钮未绑定对应邮件实例，导致点击任何按钮都会使用最后一封邮件的数据入库。下面分三步帮你彻底解决这个问题：

1. 重构Handlebars视图：给按钮绑定对应邮件的元数据 #

首先修改你的Handlebars模板，去掉内联的onclick，改用data-*属性存储当前邮件的关键信息，同时给按钮统一的类名方便事件监听：

{{#each messages}} 
<div class="mail-item"> <!-- 新增包裹容器，方便关联元素 -->
  <h3 class="list-group-item-heading from_1">{{this.from.emailAddress.name}}</h3>
  <!-- 替换按钮：用data属性存邮件数据，去掉onclick，用统一类名 -->
  <button type="button" class="btn btn-primary col-2 btn-urgent" 
          data-from="{{this.from.emailAddress.name}}"
          data-subject="{{this.subject}}"
          data-received="{{formatDate this.receivedDateTime}}"
          data-preview="{{this.bodyPreview}}">
    urgent
  </button> 
  <h4 class="test list-group-item-heading subject_1">{{this.subject}}</h4> 
  <p class="list-group-item-heading text-muted received_1"><em>Received: {{formatDate this.receivedDateTime}}</em></p> 
  <div class="azerty"> 
    <p class="list-group-item-text text-muted azerty bodypreview_1"><em>{{this.bodyPreview}}</em></p> 
    <div class="demasquer"> 
      <p class="body_1"><em>{{{this.uniqueBody.content}}}</em></p>
    </div> 
  </div>
</div>
{{/each}}

2. 重写JS逻辑：用事件委托获取对应邮件数据，避免全局变量 #

之前的全局变量$input、$sub等会被循环覆盖，点击按钮时只能拿到最后一封邮件的数据。现在改用事件委托监听按钮点击，直接从按钮的data属性中读取当前邮件的信息：

$(document).ready(function() {
  console.log("********************TEST_INSERT_INIT*********************");

  // 用事件委托监听所有.btn-urgent按钮的点击
  $(document).on('click', '.btn-urgent', function() {
    console.log("*************************");
    console.log("btn_urgent clicked");
    
    // 从当前按钮的data属性中获取对应邮件的数据
    const mailData = {
      from: $(this).data('from'),
      subject: $(this).data('subject'),
      received: $(this).data('received'),
      preview: $(this).data('preview')
    };

    console.log(mailData);
    console.log("*************************");

    // 发送AJAX请求
    $.ajax({
      url: '../../wp-content/plugins/game_plugin/process_general.php',
      type: 'POST',
      data: {
        info: 'insert_to_db',
        input: mailData.from,
        sub: mailData.subject,
        recei: mailData.received,
        preview: mailData.preview
      },
      success: function(response) {
        console.log("*************************");
        console.log("邮件入库成功");
        console.log("*************************");
      },
      error: function(xhr, status, error) {
        // 新增错误处理，方便调试
        console.error("入库失败:", error);
      }
    });
  });
});

关键改进点： #

• 去掉了全局循环赋值，避免变量被覆盖
• 使用事件委托，即使后续动态加载邮件也能正常监听点击
• 从按钮的data属性直接获取对应邮件的数据，确保点击的按钮和邮件一一对应

3. 修正PHP入库代码：修复变量错误 #

你的PHP代码里有明显的错误：$sub= $_POST['sub'][$i];中的$i未定义，而且前端传递的是单个值不是数组，修正如下：

<?php
// 先检查POST参数是否存在，避免报错
if(isset($_POST['info']) && $_POST['info'] === 'insert_to_db') {
    $input = isset($_POST['input']) ? sanitize_text_field($_POST['input']) : '';
    $recei = isset($_POST['recei']) ? sanitize_text_field($_POST['recei']) : '';
    $sub = isset($_POST['sub']) ? sanitize_text_field($_POST['sub']) : '';
    $preview = isset($_POST['preview']) ? sanitize_text_field($_POST['preview']) : '';

    // 调用入库函数
    insert_to_db($input, $sub, $recei, $preview);
}

function insert_to_db($input, $sub, $recei, $preview){
    global $wpdb;
    $wpdb->insert(
        'test_insert', // 表名
        array(
            // 注意：如果id是自增主键，不需要传空值，直接省略即可
            'from_mail' => $input,
            'subject' => $sub,
            'recei' => $recei,
            'preview' => $preview,
        ),
        array( '%s', '%s', '%s', '%s' ) // 对应字段的格式，去掉多余的%d（因为id如果自增不需要传）
    );
}
?>

关键修正： #

• 移除了无意义的$sub= $_POST['sub'][$i];，直接使用$_POST['sub']
• 添加了sanitize_text_field()函数（WordPress内置），防止SQL注入和XSS攻击
• 如果id是自增主键，不需要传递空值，直接从数组中移除即可，避免入库报错

额外建议 #

1. 避免前端存储敏感数据：如果邮件内容包含敏感信息，不要用data-*属性存储，而是给每个邮件添加唯一ID（比如Outlook邮件的id字段），点击按钮时传递ID到后端，由后端通过Outlook API重新获取数据入库，更安全。
2. Handlebars内容转义：如果邮件的subject或bodyPreview包含特殊字符（比如引号），需要用Handlebars的转义处理，避免data属性解析错误，可以使用自定义helper处理转义。
3. AJAX响应处理：可以在success回调中添加UI反馈（比如按钮变灰、显示成功提示），提升用户体验。

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