Javascript/AJAX 错误 404 未找到或未定义

Javascript/AJAX Error 404 Not found or Undefined

我有一个页面向下循环第一列并将值复制到文本框,然后它应该查询 data.asp,但我不断收到以下任一错误 GET http://192.168.1.12/pb_search/v2/demo/data.asp?h_prodref=undefined 404 (Not Found) 要么 XHR finished loading: GET "http://192.168.1.12/pb_search/v2/demo/data.asp?h_prodref=undefined"。来自 Google Chrome 开发者工具的错误。

我的两个脚本都是独立工作的,但是当我将它们拼凑在一起时,我得到了这些错误。我可能遗漏了一些非常简单的东西,但我非常了解这一点,所以任何帮助将不胜感激。

完整代码

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<table width="50%" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td width="16%" class="prodref">84PS01</td>
    <td width="51%"><input type="text" class="h_prodref" /><button type="button" onclick="loadDoc()">Change Content</button></td>
    <td width="33%" id="demo">&nbsp;</td>
  </tr>
  <tr>
    <td class="prodref">92K002</td>
    <td><input type="text" class="h_prodref" /><button type="button" onclick="loadDoc()">Change Content</button></td>
    <td id="demo">&nbsp;</td>
  </tr>
  <tr>
    <td class="prodref">68F017</td>
    <td><input type="text" class="h_prodref" /><button type="button" onclick="loadDoc()">Change Content</button></td>
    <td id="demo">&nbsp;</td>
  </tr>
</table>
<script>
    var prodref = document.getElementsByClassName("prodref");
    var h_prodref = document.getElementsByClassName("h_prodref");
    var i = 0;
    for (i; i < prodref.length; i++) {
    h_prodref[i].value = prodref[i].innerHTML;
function loadDoc() {
    var x = document.getElementsByClassName("h_prodref");
    x[i] = document.getElementsByClassName("h_prodref").value;
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("demo").innerHTML = xhttp.responseText;
    }
  }
  xhttp.open("GET", "data.asp?h_prodref="+x[i].value, true);
  xhttp.send();
}
    }
</script>

那么问题是什么?

undefined 被添加到进行的 AJAX 调用中,而不是 x[i].value 的预期值。不过,我在这里做了一个假设,那就是

http://192.168.1.12/pb_search/v2/demo/data.asp

存在并且 HTTP 404 Not Founddata.asp 脚本作为脚本响应强制执行,而不是因为服务器找不到 data.asp 页面。

重组JavaScript

当调用 function 时,您不需要在要调用它的地方使用整个定义,如果是这种情况,您将在整个代码中复制相同的函数被称为打破编程的基本原则,如 DRY.

这里是重构 JavaScript 代码的快速示例:

var prodref = document.getElementsByClassName("prodref");
var h_prodref = document.getElementsByClassName("h_prodref");
var i = 0;
for (i; i < prodref.length; i++) {
  h_prodref[i].value = prodref[i].innerHTML;
  // Call function inside the loop
  loadDoc();
}

// Definition should be defined once
function loadDoc() {
  var x = document.getElementsByClassName("h_prodref");
  x[i] = document.getElementsByClassName("h_prodref").value;
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("demo").innerHTML = xhttp.responseText;
    }
  }
  xhttp.open("GET", "data.asp?h_prodref="+x[i].value, true);
  xhttp.send();
}