点击发送按钮时如何从Bootstrap模态框传递参数至AJAX请求

我来帮你搞定这个问题，核心是要先把选中的教练信息正确填充到模态框里，然后在发送按钮点击时获取这些数据并发起AJAX请求。下面是一步步的修改方案：

1. 优化openModal函数 #

原来的show.bs.modal事件绑定可能会重复触发，我们直接在openModal里把教练的ID和名字填充到模态框的输入框里，同时把教练ID存在模态框的自定义属性里，方便后续获取：

function openModal(id, name) {
  // 填充收件人名称到只读输入框
  $('#mailto').val(name);
  // 把教练ID存在模态框的data属性里
  $('#exampleModal').data('coach-id', id);
  // 手动打开模态框，避免和data-toggle属性冲突
  $('#exampleModal').modal('show');
}

2. 实现sendMail函数 #

点击发送按钮时，我们需要获取收件人ID、消息内容，然后通过AJAX发送到后端接口：

function sendMail() {
  // 从模态框的data属性获取教练ID
  const coachId = $('#exampleModal').data('coach-id');
  // 获取用户输入的消息内容
  const messageText = $('#message_text').val().trim();
  // 获取收件人名称（如果后端需要的话）
  const recipientName = $('#mailto').val();

  // 先做简单的表单验证，避免空消息发送
  if (!messageText) {
    alert('请输入消息内容');
    return;
  }

  // 发起AJAX请求
  $.ajax({
    url: '你的后端邮件处理接口地址', // 替换成实际的后端URL
    type: 'POST', // 根据后端要求选择GET/POST
    data: {
      coach_id: coachId,
      mail_to: recipientName,
      message: messageText
    },
    success: function(response) {
      // 请求成功后的处理逻辑
      alert('邮件发送成功！');
      // 关闭模态框
      $('#exampleModal').modal('hide');
      // 清空消息输入框，方便下次使用
      $('#message_text').val('');
    },
    error: function(xhr, status, error) {
      // 请求失败的处理逻辑
      alert('邮件发送失败，请稍后重试');
      console.error(error);
    }
  });
}

3. 调整PHP循环里的触发逻辑（可选优化） #

原来的a标签同时有onclick和data-toggle/data-target，容易造成事件冲突，我们可以去掉data-toggle和data-target，完全通过openModal函数控制模态框显示：

<?php foreach ($coaches as $key => $coach) {?>
<a class="u-icon-v1" href="javascript:" onclick="openModal('<?php echo $coach['id']?>','<?php echo $coach['name']?>')">
<i class="icon-envelope-letter"></i></a>
<?php } ?>

4. 可选：用隐藏输入框存储教练ID #

如果你觉得用data属性不够直观，也可以在模态框的表单里加一个隐藏输入框来存储教练ID：

<div class="form-group">
 <label for="recipient-name" class="col-form-label">Mail To:</label>
 <input type="text" name="mailto" id="mailto" class="form-control" readonly="readonly">
 <!-- 添加隐藏输入框存储教练ID -->
 <input type="hidden" id="coach_id" name="coach_id">
</div>

然后在openModal函数里设置这个隐藏框的值：

$('#coach_id').val(id);

对应的sendMail里就可以直接取$('#coach_id').val()来获取教练ID了。

这样修改后，点击发送按钮时就能正确收集收件人信息和用户输入的消息，通过AJAX传递给后端处理啦！

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