Question

我有一个HTML页面，可以动态加载一个到多个HTML片段，这些片段在页面上用作模式窗体。该页面来自CMS，因此业务用户可以决定“我想在此页面上显示一个表单”或“我想在此页面上显示6个表单”。每个链接及其加载信息都需要是一个可以放在任何页面上的模块。当在页面上选择每个链接时，我输出的代码片段将在页面加载时调用Ajax加载脚本。

摘录示例：

<script>
$(document).ready(function() 
{   
load('/web_fragments/file.html', 'content_item1');  
$('#item1').click(function(){               
    $('#rmi_item1').dialog("open");        
    return false;    
}); 
$('#rmi_item1.modal').dialog({autoOpen: false, modal:true, 
  dialogClass:'modal', width:590});}); 
</script>
<a href="#" id="item1">Request More Information</a>
<div id="rmi_item1" class="appLvl mod modal dialog">
<div id="content_item1">
</div>
</div>

页面上的每个ID和div都有唯一的标识符，为了便于阅读，我在这里简化了它们。问题是加载方法。我不知道页面上会有多少，所以我无法真正创建多个加载方法。如果页面上只有一个项目，那么一切都很好。这是我现在的加载方法。我是Ajax / jQuery的新手，所以我向你道歉并请求你善待！：）

function load(url, target)
{
    document.getElementById(target).innerHTML = ' Fetching data...';
    if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (req != undefined) {
        req.onreadystatechange = function() {targetDiv(url, target);};
        req.open("GET", url, true);
        req.send("");
    }
}

function targetDiv(url, target)
{
    if (req.readyState == 4) { // only if req is "loaded"
    if (req.status == 200) { // only if "OK"
    document.getElementById(target).innerHTML = req.responseText;
    }
    }
}

欢迎提出任何建议或帮助，因为我现在正式对这个错误感到失望！谢谢！

Answer 1

我认为你的问题来自这一行

req = new XMLHttpRequest();

这里使用（并隐式声明）变量req。这个变量在。中声明全局范围（窗口对象）

将此var设置为加载函数的本地，如此

var req = new XMLHttpRequest();

这将阻止第二个代码段覆盖req var并废弃第一个刚被解雇但尚未收到的片段请求。

查看jquery加载方法。这应该使您的代码更小并避免这个问题。

希望这有帮助，

使用Ajax加载不同数量的文件

1 个答案: