Drupal 7：Form API Ajax回调引发同步XMLHttpRequest弃用警告

你遇到的这个问题太典型了——同步XMLHttpRequest（XHR）在主线程被弃用，不仅会触发浏览器警告，更关键的是它会阻塞主线程，导致表单提交的点击事件被卡住，看起来就是“无响应”。下面给你拆解问题和解决方案：

问题根源 #

同步XHR会锁住浏览器的主线程，直到请求完全完成。这期间浏览器没法处理任何用户交互（包括表单提交按钮的点击事件），所以你看到提交没反应，同时浏览器抛出那个弃用警告。

解决方案：把同步请求改成异步请求 #

1. 原生XHR的修改示例 #

假设你原来的代码是这样的（同步请求）：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/get-form-data?value=' + selectedValue, false); // 第三个参数false是同步
xhr.send();
if (xhr.status === 200) {
  // 填充第二个表单字段
  document.getElementById('second-form-field').value = xhr.responseText;
}

改成异步请求，用onload回调处理结果：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/get-form-data?value=' + selectedValue, true); // 第三个参数true是异步
xhr.onload = function() {
  if (this.status === 200) {
    // 填充第二个表单字段
    document.getElementById('second-form-field').value = this.responseText;
  }
};
xhr.send();

2. 更推荐的Drupal专属方案：用Drupal.ajax框架 #

Drupal本身有成熟的AJAX系统，完全适配表单场景，不用自己写原生XHR，还能避免很多坑。比如：

第一步：在表单构建函数里给下拉框加AJAX属性

function my_first_form($form, &$form_state) {
  $form['select_field'] = [
    '#type' => 'select',
    '#title' => '选择项',
    '#options' => ['option1' => '选项1', 'option2' => '选项2'],
    '#ajax' => [
      'callback' => 'my_form_ajax_callback',
      'wrapper' => 'second-form-container', // 第二个表单的容器ID
      'method' => 'replace',
      'effect' => 'fade',
    ],
  ];
  return $form;
}

第二步：编写AJAX回调函数，返回更新后的第二个表单

function my_form_ajax_callback($form, &$form_state) {
  $selected_value = $form_state['values']['select_field'];
  // 根据选中值生成第二个表单的字段
  $second_form = drupal_get_form('my_second_form', $selected_value);
  return $second_form;
}

第三步：确保第二个表单有对应的容器

function my_second_form($form, &$form_state, $selected_value = NULL) {
  $form['#prefix'] = '<div id="second-form-container">';
  $form['#suffix'] = '</div>';
  
  // 根据$selected_value填充字段
  $form['filled_field'] = [
    '#type' => 'textfield',
    '#title' => '自动填充字段',
    '#value' => $selected_value ? '对应的值：' . $selected_value : '',
  ];
  
  return $form;
}

关键注意点 #

• 异步请求不会阻塞主线程，所以表单提交的点击事件能正常被浏览器处理
• 如果你的原有代码里有event.preventDefault()或者阻止表单默认提交的逻辑，要检查是否在异步请求完成后正确放行
• 用Drupal.ajax的话，它会自动处理异步逻辑，还能和Drupal的表单状态保持同步，避免自定义XHR可能出现的兼容性问题

改完之后测试一下：下拉框变更时第二个表单正常填充，点击提交按钮能正常触发表单提交，同时浏览器的弃用警告应该就消失了。

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