使用childNodes定位响应容器后FormData失效，如何修复并传参？

你遇到的核心问题其实是两个：一是用childNodes[9]定位响应容器既不稳定，还导致你找输入框的范围完全错了；二是输入框的查找对象不对，所以要么报错要么拿不到有效数据。咱们一步步来修复：

问题根源拆解 #

1. 错误的查找范围：你把elementTreeDestination设成了response-container这个div，但你的first_name和last_name输入框是在它的父元素.container里，根本不是response-container的子元素。所以用elementTreeDestination.querySelector('.first_name')肯定找不到元素，直接报错；换成querySelectorAll只会返回空数组，.value自然是undefined，后台收不到数据也很正常。
2. 不稳定的节点索引：childNodes[9]完全依赖HTML里的节点顺序（包括换行、空格这些看不见的文本节点），只要你调整一下HTML结构（比如加个换行、删个空格），这个索引就会失效，这种写法非常脆弱。

修复后的完整代码实现 #

我们换一种更可靠的思路：先找到当前按钮所在的.container父容器，然后从这个容器里分别获取响应容器和输入框，这样不管结构怎么微调，都能准确找到对应元素。

修改后的index.php代码：

<script>
document.addEventListener('DOMContentLoaded', function(){
 // 绑定所有.execute按钮的点击事件
 var execute = document.querySelectorAll('.execute');
 for (var i = 0; i < execute.length; i++) {
 execute[i].addEventListener('click', ajax);
 }

 function ajax(elementTrigger){
 var element = elementTrigger.currentTarget;
 // 第一步：找到当前按钮所在的.container父容器（核心改动！）
 var container = element.closest('.container');
 // 第二步：从container里定位到对应的响应容器
 var elementTreeDestination = container.querySelector('.response-container');

 var xhr = new XMLHttpRequest();
 xhr.onreadystatechange = function(){
 if(xhr.readyState === 4){
 elementTreeDestination.innerHTML = xhr.responseText;
 // 执行响应中的脚本
 var exJs = elementTreeDestination.getElementsByTagName('script');
 for(var i=0; i < exJs.length; i++){
 eval(exJs[i].text);
 }
 }
 }

 // 第三步：从同一个container里获取输入框的值
 var data = new FormData();
 var first_name = container.querySelector('.first_name').value;
 var last_name = container.querySelector('.last_name').value;

 data.append('first_name', first_name);
 data.append('last_name', last_name);
 xhr.open('POST','x.php'); // 这里修正了请求地址，确保指向你的后台文件
 xhr.send(data);
 }
});
</script>
<div class='container'>
 <h1>1</h1>
 <button class='execute'>Execute 1</button>
 <input class='first_name' type='text' placeholder='First Name'>
 <input class='last_name' type='text' placeholder='Last Name'>
 <div class='response-container'>
 </div>
</div>
<div class='container'>
 <h1>2</h1>
 <button class='execute'>Execute 2</button> <!-- 建议修改按钮文本，方便区分两组操作 -->
 <input class='first_name' type='text' placeholder='First Name'>
 <input class='last_name' type='text' placeholder='Last Name'>
 <div class='response-container'>
 </div>
</div>

关键改动说明 #

1. 用closest('.container')定位父容器：closest方法会向上查找最近的匹配父元素，不管按钮在.container里的位置如何变化，都能准确找到对应的容器，比parentNode加固定索引靠谱太多。
2. 统一从父容器获取元素：响应容器和输入框都从同一个.container里查找，确保是同一组的元素，不会跨组拿错值。
3. 修正请求地址：原来的xhr.open('POST','x')调整为x.php（如果你的后台文件名确实是x可以忽略，但通常PHP文件后缀是.php）。

这样修改后，既能准确把AJAX响应渲染到response-container里，又能正确获取当前组的输入框值传递给后台，同时代码的稳定性和可维护性也大大提升了。

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