Question

我有这个脚本将用户输入数据发送到ajax页面。我面临的问题现在是我最初基于使用parent div输出

的脚本

ajax请求完美无缺，但我意识到我想要定位某个子div，因为ajax请求出现在那个父div中，所以我做了一个

尝试使用这个总是对我工作的.parentNode.childNodes []来帮助我选择那个我希望ajax请求出现在那个父节点的子节点但是这个方法不能正常使用FormData（）我知道问题发生在这里

var first_name=  elementTreeDestination.querySelector('.first_name').value;
var last_name=  elementTreeDestination.querySelector('.last_name').value;

所以我不知道如何修复这个我希望能够选择一个子div类调用response-container来在该父div类调用容器中生成ajax请求，同时我想拥有FormData （）正常工作。那我该如何解决呢？

这是我的代码

的index.php

<script>

document.addEventListener('DOMContentLoaded', function(){

//Distinguish each execute class name
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;

  //Target the AJAX response div to also allow JS to run in that div
  var elementTreeDestination= element.parentNode.childNodes[9]; 
  /*^If I remove childNodes it works and it also works with the FormData variables below for example ... elementTreeDestination.querySelector('...') 
  but I need the ajax request to target [9] which targets the class response-container*/
 //
  var xhr= new XMLHttpRequest();

  xhr.onreadystatechange= function(){
      if(xhr.readyState === 4){
          elementTreeDestination.innerHTML= xhr.responseText;

 /*<Allow JS on the requested page>*/
    var exJs= elementTreeDestination.getElementsByTagName('script');
    var enableAll = exJs.length;
    for(var i=0; i < enableAll; i++){
    eval(exJs[i].text);
}
  /*</Allow JS on the requested page>*/

      }
  }

  var data= new FormData();

 var first_name=  elementTreeDestination.querySelector('.first_name').value;//Error occurs here. But if I put querySelectorAll no errors but it sends nothing
 var last_name=  elementTreeDestination.querySelector('.last_name').value; //Error occurs here. But if I put querySelectorAll no errors but it sends nothing
 /*^ I know the problem occurs due to the formData section^*/

  data.append('first_name', first_name);
data.append('last_name', last_name);

  xhr.open('POST','x');
  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><!--</response-container>-->
</div><!--</container>-->

<div class='container'>
  <h1>2</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><!--</response-container>-->
</div><!--</container>-->

x.php

<script>

alert('Welcome to page x.php');

</script>

<style>

img{
    display: block;
    width: 150px;
    height: 150px;
}

</style>

<img src='https://ak3.picdn.net/shutterstock/videos/23831083/thumb/1.jpg'>

<h1><?php echo $_POST['first_name']; ?></h1>
<h1><?php echo $_POST['last_name']; ?></h1>

Answer 1

使用

var elementTreeDestination = element.parentNode.querySelector('.response-container');

这样你就不必依赖任意空格来移动元素childNodes[9]

这两个<input>不是elementTreeDestination的子项，因此elementTreeDestination.querySelector('.first_name').value可能会导致空指针错误并停止执行脚本。
相反，再次使用
```
var first_name = element.parentNode.querySelector('.first_name').value;
```
看起来你在循环中加入了ajax函数？这不是必要的或有用的。将它移出你的循环。

document.addEventListener('DOMContentLoaded', function() {

  //Distinguish each execute class name
  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;

  //Target the AJAX response div to also allow JS to run in that div
  var elementTreeDestination = element.parentNode.querySelector(".response-container");
  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      elementTreeDestination.innerHTML = xhr.responseText;

      /*<Allow JS on the requested page>*/
      var exJs = elementTreeDestination.getElementsByTagName('script');
      var enableAll = exJs.length;
      for (var i = 0; i < enableAll; i++) {
        eval(exJs[i].text);
      }
      /*</Allow JS on the requested page>*/
    }
  };


  var data = new FormData();

  var first_name = element.parentNode.querySelector('.first_name').value;
  var last_name = element.parentNode.querySelector('.last_name').value;

  data.append('first_name', first_name);
  data.append('last_name', last_name);

  console.log(first_name, last_name);

  xhr.open('POST', 'x');
  xhr.send(data);

}

<div class='container'>
  <h1>1</h1>
  <button class='execute'>Execute 1</button>
  <input class='first_name' type='text' placeholder='First Name' value='Alice'>
  <input class='last_name' type='text' placeholder='Last Name' value='Allison'>
  <div class='response-container'>
  </div>
  <!--</response-container>-->
</div>
<!--</container>-->

<div class='container'>
  <h1>2</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>
  <!--</response-container>-->
</div>
<!--</container>-->

在某些情况下，FormData（）在我的脚本中不起作用

1 个答案: