Question

点击链接发送ajax调用以获取响应，我能够得到正确的响应，但响应页面内的脚本标记不起作用。如何让它运行

这是HTML PAGE

<HTML>
<HEAD>

<link rel="stylesheet" type="text/css" href="css/global.css">
<script type="text/javascript" src="js/ajaxgetter.js"></script>
<script type="text/javascript" src="js/mootools.js"></script>
</HEAD>

<BODY>

<h1>ajax block container</h1>

<div id="container">
    <div id="tab_wrapper">
        <ul id="tab_list" >
            <li>
             <a href="#" id="firstelement" onclick="ajaxenabled('elements/firstelement.html','firstelement','content_tab')">Number 1 </a>               
            </li>
            <li>
             <a href="#" id="secondelement" onclick="ajaxenabled('elements/secondelement.html','secondelement','content_tab')">Number 2</a>
              <br/><br/><br/>
              </li>

        </ul>
    </div>

<br/><br/><br/><br/><br/><br/>

<div id="content_tab">

</div>
</div>

</BODY>
</HTML>

javascript代码

function ajaxenabled(url,param,id)
{
    var page_request = false    
    if (window.XMLHttpRequest){
        page_request = new XMLHttpRequest()
    }
    else if (window.ActiveXObject){
        try{
            page_request = new ActiveXObject("MSXML2.XMLHTTP")
        } 
        catch (e){
            try {
                page_request = new ActiveXObject("Microsoft.XMLHTTP")
            }
            catch (e){}
        }
    }
    else
        return false;
        page_request.onreadystatechange=function(){
            if(param!=null)
            {
                loadpage(page_request, param,id);
            }
            if(param==null)
            {
                loadpage(page_request,'',id);

            }
        }
        page_request.open('GET', url, true);
        page_request.send(null);
}


function loadpage(page_request,param,id){

    var getblock=document.getElementById(id);

    if(page_request.status==200) {
        getblock.style.display='block';
        getblock.innerHTML=page_request.responseText;

    if(param!=null)
        {
            //alert("showed");
        }   

    }

}

回复页面“firstelement.html”

<h1>First Element having ajax call</h1>

<script type="text/javascript">
alert("testing the simple function");
</script>

firstelement.html内“脚本”选项卡内的警报未触发，

Answer 1

您应该将该脚本从HTML文件内部移动到.js文件，并在成功完成ajax调用后调用该脚本。您的HTML文件将是：

  <HTML>
  <HEAD>

  <link rel="stylesheet" type="text/css" href="css/global.css">
  <script type="text/javascript" src="js/ajaxgetter.js"></script>
  <script type="text/javascript" src="js/mootools.js"></script>
  <script type="text/javascript" src="js/YOUR_SCRIPT_FILE_HERE.js"></script>
  </HEAD>

  <BODY>

  <h1>ajax block container</h1>

  .
  .
  .

你当然会移动

<script type="text/javascript">
alert("testing the simple function");
</script>

放入.js文件中，放在“js”目录中。记得把它作为一个你可以调用的方法，这样.js文件就会有这样的东西

function afterAjaxSuccess(){
    alert("testing the simple function");
  }

然后在你的html文件中更新你的loadpage方法：

function loadpage(page_request,param,id){

var getblock=document.getElementById(id);

if(page_request.status==200) {
    getblock.style.display='block';
    getblock.innerHTML=page_request.responseText;
    afterAjaxSuccess();                             //updated line here

if(param!=null)
    {
        //alert("showed");
    }   

}

}

，您的HTML页面变为

<h1>First Element having ajax call</h1>

没有任何脚本

Answer 2

我只是使用mootools Request.HTML它会评估返回页面中的所有脚本标签，如果在选项中设置了更新，则替换元素中的html。

如何在ajax页面中运行脚本

2 个答案: