获取第一个data.html而不是第二个。为什么？ [英] Getting the first data.html instead of the second one. Why?

问题描述

在下面的代码中，我要求将两个数据文件插入两个不同的页面。

我对不同的var（s）（这里是第二大代码块）做同样的功能，但我不知道为什么我得到相同的数据一个 .html而不是数据两个 .html。

data-one.html

  var x = document.getElementById（datahandeler）; / *将html元素保存在var * / 
中x.addEventListener（click，reqListener）; / *将事件监听器附加到元素* / 
 
 / *事件监听器函数* / 
函数reqListener（）{
 var y = document.getElementById（content）。 innerHTML =（this.responseText）; 
} / *获取可插入的内容区域替换响应* / 
 
 var oReq = new XMLHttpRequest（）; 
 oReq.addEventListener（load，reqListener）; / *将事件监听器附加到http请求* / 
 oReq.open（GET，data / data-one.html）; / *获取数据* / 
 oReq.send（）; / *发送数据* / 
  

data-two.html

  var x1 = document.getElementById（datahandeler1）; / *将html元素保存在var * / 
中x1.addEventListener（click，reqListener）; / *将事件监听器附加到元素* / 
 
 / *事件侦听器函数* / 
函数reqListener（）{
 var y1 = document.getElementById（content）。 innerHTML =（this.responseText）; 
} / *获取可插入的内容区域替换响应* / 
 
 var oReq1 = new XMLHttpRequest（）; 
 oReq1.addEventListener（load，reqListener）; / *将事件监听器附加到http请求* / 
 oReq1.open（GET，data / data-two.html）; / *获取数据* / 
 oReq1.send（）; / *发送数据* / 
  

解决方案

函数与第一个 regListener 具有相同的名称，它会覆盖第一个定义。在特定的作用域中只能有一个给定名称的函数。

因此，当定义 reqListener（）的第二个副本时， code>，它将覆盖并替换第一个定义，并且最终只有一个 reqListener（）的副本，它的行为与第二个定义相同。

将函数的名称更改为唯一：

$ p $ / *事件侦听器函数* /
函数reqListener1（）{
var y = document.getElementById（content）。innerHTML =（this.responseText）;
} / *获取可插入的内容区域替换响应* /

var x = document.getElementById（datahandeler）; / *将html元素保存在var * /
中x.addEventListener（click，reqListener1）; / *将事件监听器附加到元素* /


var oReq = new XMLHttpRequest（）;
oReq.addEventListener（load，reqListener1）; / *将事件监听器附加到http请求* /
oReq.open（GET，data / data-one.html）; / *获取数据* /
oReq.send（）; / *发送数据* /



/ *事件侦听器函数* /
函数reqListener2（）{
var y1 = document.getElementById（内容）。innerHTML =（this.responseText）;
} / *获取可插入的内容区域替换响应* /

var x1 = document.getElementById（datahandeler1）; / *将html元素保存在var * /
中x1.addEventListener（click，reqListener2）; / *将事件监听器附加到元素* /

var oReq1 = new XMLHttpRequest（）;
oReq1.addEventListener（load，reqListener2）; / *将事件监听器附加到http请求* /
oReq1.open（GET，data / data-two.html）; / *获取数据* /
oReq1.send（）; / *发送数据* /


仅供参考，您的代码注释风格难以阅读和遵循。我很高兴看到这些评论，但是一些插入评论的风格比其他评论更容易遵循。

---

另外，目前还不清楚为什么你要为Ajax事件和点击事件使用相同的事件处理程序。这些是不同的事件。事件处理程序对于 this 具有不同的值，并且在客户端事件中不会有 this.responseText 。所以，客户端事件出现错误，但不清楚你想要做什么，我不知道准确的建议。

---

也许，所有这些应该只是内联，匿名和单独的事件处理程序，因此不存在命名冲突：

  document.getElementById（datahandeler）。addEventListener（click，function（e）{
 //在这里处理datahandeler的单击事件
 //不知道你期望的在这里做
}）; 
 
 var oReq = new XMLHttpRequest（）; 
 
 //将事件监听器附加到http请求
 oReq.addEventListener（load，function（）{'
 //将ajax结果放入内容区
 document.getElementById（content）。innerHTML = this.responseText; 
}）; 
 //获取数据
 oReq.open（GET，data / data-one.html）; 
 //发送数据
 oReq.send（）; 
  

---

或者（这只是猜测），if您试图在单击元素时运行ajax调用，您可以这样做：

  document.getElementById（ datahandeler）。addEventListener（click，function（e）{
 var oReq = new XMLHttpRequest（）; 
 //将事件侦听器附加到http请求
 oReq.addEventListener（ load，function（）{'
 //将ajax结果放入内容区
 document.getElementById（content）。innerHTML = this.responseText; 
}）; 
 //获取数据
 oReq.open（GET，data / data-one.html）; 
 //发送数据
 oReq.send（）; 
} ）; 
  

In the following code I am requesting to insert two data files into two different pages.

I am doing the same function for both with different var(s) (the second big block of code here) but I don't know why I'm getting the same data-one.html instead of data-two.html.

data-one.html

var x = document.getElementById("datahandeler"); /*save html element in var*/
x.addEventListener("click", reqListener); /*attach event listener to the element*/

/*event listener function*/
function reqListener () {
  var y = document.getElementById("content").innerHTML = (this.responseText); 
}  /*grab the insertable content area replace response */

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener); /*attach event listener to the http request*/
oReq.open("GET", "data/data-one.html"); /*get data */
oReq.send(); /*send data*/

data-two.html

var x1 = document.getElementById("datahandeler1"); /*save html element in var*/
x1.addEventListener("click", reqListener); /*attach event listener to the element*/

/*event listener function*/
function reqListener () {
  var y1 = document.getElementById("content").innerHTML = (this.responseText); 
}  /*grab the insertable content area replace response */

var oReq1 = new XMLHttpRequest();
oReq1.addEventListener("load", reqListener); /*attach event listener to the http request*/
oReq1.open("GET", "data/data-two.html"); /*get data */
oReq1.send(); /*send data*/

解决方案

When you define the second function with the same name as the first regListener, it overwrites the first definition. There can be only one function with a given name in a particular scope.

So, when you define the second copy of reqListener(), it overwrites and replaces the first definition and you end up with only one copy of reqListener() which behaves like the second one.

Change the names of your functions to be unique:

/*event listener function*/
function reqListener1 () {
  var y = document.getElementById("content").innerHTML = (this.responseText); 
}  /*grab the insertable content area replace response */

var x = document.getElementById("datahandeler"); /*save html element in var*/
x.addEventListener("click", reqListener1); /*attach event listener to the element*/


var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener1); /*attach event listener to the http request*/
oReq.open("GET", "data/data-one.html"); /*get data */
oReq.send(); /*send data*/



/*event listener function*/
function reqListener2 () {
  var y1 = document.getElementById("content").innerHTML = (this.responseText); 
}  /*grab the insertable content area replace response */

var x1 = document.getElementById("datahandeler1"); /*save html element in var*/
x1.addEventListener("click", reqListener2); /*attach event listener to the element*/

var oReq1 = new XMLHttpRequest();
oReq1.addEventListener("load", reqListener2); /*attach event listener to the http request*/
oReq1.open("GET", "data/data-two.html"); /*get data */
oReq1.send(); /*send data*/

FYI, your code commenting style is difficult to read and follow. I'm glad to see the comments, but some styles of inserting comments are much easier to follow than others.

---

Also, it is not clear why you're trying to use the same event handler for an Ajax event and for a click event. These are different events. The event handler will have a different value for this and there will be no this.responseText on the client event. So, something appears wrong with the client events, but it isn't clear what you're trying to do some I'm not sure what to suggest exactly.

---

Perhaps, all these should just be inline, anonymous and separate event handlers so there is no naming conflict:

document.getElementById("datahandeler").addEventListener("click", function(e) {
    // handle the click event for datahandeler here
    // not sure what you expected to do here
});

var oReq = new XMLHttpRequest();

// attach event listener to the http request
oReq.addEventListener("load", function() {'
    // put ajax result into content area
    document.getElementById("content").innerHTML = this.responseText;
}); 
// get data
oReq.open("GET", "data/data-one.html");
// send data
oReq.send();

---

Or (this is just a guess), if you're trying to run the ajax call when the element is clicked, you can do that like this:

document.getElementById("datahandeler").addEventListener("click", function(e) {
    var oReq = new XMLHttpRequest();
    // attach event listener to the http request
    oReq.addEventListener("load", function() {'
        // put ajax result into content area
        document.getElementById("content").innerHTML = this.responseText;
    }); 
    // get data
    oReq.open("GET", "data/data-one.html");
    // send data
    oReq.send();
});

这篇关于获取第一个data.html而不是第二个。为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！