如何在Ajax与JavaScript中传递变量以更新唯一DOM元素

核心问题分析 #

你的代码存在三个关键问题导致无法支持多评论区域：

1. 全局的oRequest会被多个请求覆盖，后续请求的回调会拿到错误的请求对象
2. onreadystatechange回调无法直接接收ident参数，浏览器触发回调时不会主动传参
3. 固定的元素ID（如commentfield、newcomment）在多区域下会冲突，无法定位到正确的元素

修改后的完整代码 #

<html>
<head>
<script>
function SendtoAjax(ident) {
    // 局部变量存储请求对象，避免全局覆盖
    var oRequest;
    if (window.XMLHttpRequest) {
        oRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        oRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }

    // 给请求对象附加自定义属性，存储当前评论区域的标识
    oRequest.commentIdent = ident;

    oRequest.open("POST", "AJAX.asp", true);
    // 用匿名函数作为回调，将当前请求对象传入UpdateComment
    oRequest.onreadystatechange = function() {
        UpdateComment(this);
    };

    // 获取对应评论区域的输入框内容，ID带标识后缀
    var val = document.getElementById('commentfield' + ident).value.replace(/\n/g, "<br>");
    oRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    oRequest.send("strCmd=availability&commentaid=" + ident + "&commentfield=" + encodeURIComponent(val));
}

function UpdateComment(request) {
    if (request.readyState == 4) {
        // 拼接目标div的ID：newcomment + 标识
        var targetDivId = "newcomment" + request.commentIdent;
        if (request.status == 200) {
            document.getElementById(targetDivId).innerHTML = request.responseText;
            // 可选：提交后清空当前评论框
            document.getElementById('commentfield' + request.commentIdent).value = "";
        } else {
            document.getElementById(targetDivId).innerHTML = "异步请求错误";
        }
    }
}
</script>
</head>
<body>
<!-- 第一个评论区域（标识1434） -->
<form method="post" action="javascript:void(0);" name="form1434">
    <textarea name="commentfield" id="commentfield1434"></textarea>
    <input id="commentaid1434" type="hidden" value="Available1434">
    <input id="submitcomment1434" type="button" value="提交" onClick="SendtoAjax(1434);">
    <br><br><div id="newcomment1434"></div>
</form>

<!-- 第二个评论区域（标识1484） -->
<form method="post" action="javascript:void(0);" name="form1484">
    <textarea name="commentfield" id="commentfield1484"></textarea>
    <input id="commentaid1484" type="hidden" value="Available1484">
    <input id="submitcomment1484" type="button" value="提交" onClick="SendtoAjax(1484);">
    <br><br><div id="newcomment1484"></div>
</form>
</body>
</html>

关键修改说明 #

• 局部请求对象：将oRequest定义为SendtoAjax内的局部变量，每个评论请求创建独立的对象，避免互相覆盖
• 自定义属性传标识：给请求对象添加commentIdent属性存储当前区域的唯一标识，让回调函数能获取到该值
• 动态元素ID：所有评论相关元素（输入框、按钮、结果div）的ID都加上对应标识后缀，确保每个区域的元素唯一
• 回调传参优化：用匿名函数作为onreadystatechange的回调，将当前请求对象传入UpdateComment，通过请求对象的自定义属性拿到标识，定位到正确的div

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