JavaScript报Uncaught TypeError错误原因及Ajax传参代码求助

这个错误的直接原因非常明确：你在sendrate函数里使用了变量str，但这个变量既没有作为参数传入，也没有在函数内部声明赋值，它的值是undefined，自然无法读取length属性。

结合你的实际需求（点击图片通过Ajax发送rated和rid两个参数），代码还有几个关键问题需要修正：

• 函数明明接收了rated和rid参数，却全程没用到，反而依赖不存在的str
• HTML里的rid不是标准属性，不符合HTML规范，应该使用data-*系列的自定义属性

修正步骤与完整代码示例 #

1. 修正JavaScript逻辑

移除对未定义变量str的引用，改用实际要传递的rated和rid参数，同时给URL参数做编码处理，避免特殊字符破坏请求结构：

function sendrate(rated, rid) { 
  // 可选：添加参数有效性校验，避免无效请求
  if (!rated || !rid) {
    document.getElementById("txtHint").innerHTML = "参数无效";
    return;
  }
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById('txtHint').innerHTML = this.responseText;
    }
  };
  // 拼接两个参数并编码，保证URL格式正确
  var requestUrl = 'gethint.php?rated=' + encodeURIComponent(rated) + '&rid=' + encodeURIComponent(rid);
  xmlhttp.open('get', requestUrl, true);
  xmlhttp.send();
} 

2. 修正HTML属性

把非标准的rid属性改成HTML规范的data-rid，通过dataset.rid读取属性值：

<img value="1" data-rid="3" onclick="sendrate(this.value, this.dataset.rid)" src="./images/rate1.jpg" alt="rate1" height="20" width="20">

额外小提示 #

• 参数校验可以根据实际需求调整，比如判断rated是否为数字、rid是否符合格式等
• 如果项目允许，也可以用更简洁的Fetch API替代传统XMLHttpRequest，写法更现代

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