Question

我有一个页面循环第一列并将值复制到文本框，然后它应该查询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>

Answer 1

那么问题是什么？

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

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

存在且HTTP 404 Not Found脚本强制data.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();
}

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

1 个答案:

那么问题是什么？

重构JavaScript