Question

我目前正在开发一个网站，我需要根据用户的操作动态加载页面。

示例：如果用户点击“设置”按钮，ajax函数将从外部页面加载代码，并将其放入带有“设置”标签的div中。

这是我用来发出Ajax请求的代码：

    function get_page_content(page, target_id)
    {
        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function()
        {
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
                document.getElementById(target_id).innerHTML = xmlhttp.responseText;
                // After getting the response we have to re-apply ui effects or they
                // won't be available on new elements coming from request.
                $('button').sb_animateButton();
                $('input').sb_animateInput();
            }
        }
        xmlhttp.open('GET', 'engine/ajax/get_page_content.php?page=' + page, true);
        xmlhttp.send();
    }

这是第一个片段的ajax结果：

<div id="settings_appearance">                
</div>

从这里的函数调用代码：

<div class="left_menu_item" id="left_menu_settings_appearance" onclick="show_settings_appearance()">
    Appearance
</div>

这是ajax函数放入settings_appearance div的html：

    <script type="text/javascript">
        $(function()
        {
            $('#upload_hidden_frame').hide();
            show_mybrain();

            document.getElementById('avatar_upload_form').onsubmit = function()
            {
                document.getElementById('avatar_upload_form').target = 'upload_hidden_frame';
                upload_avatar();
            }
        });
    </script>
    <div class="title">Appearance</div>
    <iframe id="upload_hidden_frame" name="upload_hidden_frame" src="" class="error_message"></iframe>
    <table class="sub_container" id="avatar_upload_form" method="post" enctype="multipart/form-data" action="engine/ajax/upload_avatar.php">
        <tr>
            <td><label for="file">Avatar</label></td>
            <td><input type="file" name="file" id="file" class="file_upload" /></td>
            <td><button type="submit" name="button_upload">Upload</button></td>
        </tr>
        <tr>
            <td><div class="hint">The image must be in PNG, JPEG or GIF format.</div></td>
        </tr>
    </table>

我想知道是否有办法执行ajax函数返回的javascript代码（返回代码中的上传按钮因此而无法工作）并且如果可以应用一些自定义的ui效果我构建加载主页面。

感谢您的帮助。

P.S。这是应用UI效果的脚本：

<script type="text/javascript">
// UI effects
$(document).ready(function()
{
  $('button').sb_animateButton();
  $('input').sb_animateInput();
  $('.top_menu_item').sb_animateMenuItem();
  $('.top_menu_item_right').sb_animateMenuItem();
  $('.left_menu_item').sb_animateMenuItem();
});
</script>

P.P.S。 ui效果不适用于Ajax函数返回的html元素（如输入和按钮）。在ajax函数返回响应后，我通过再次应用ui-effects使用了一些解决方法。可能还有另一种方法可以帮助我解决这个问题。

Answer 1

如果您使用jQuery ajax function（或简化的jQuery get function），并将数据类型设置为html，那么jQuery将评估结果中包含的任何脚本标记的内容。

您的$ .get调用类似于：

$.get('engine/ajax/get_page_content.php?page=' + page,null,function(result) {
    $("#"+target_id).html(result); // Or whatever you need to insert the result
},'html');

Answer 2

我也建议你不要，但在div中加载内容后，将元素ID传递给这个函数。这甚至会处理document.write

function do_JS(e){
        var Reg = '(?:<script.*?>)((\n|.)*?)(?:</script>)';
        var match    = new RegExp(Reg, 'img');
        var scripts  = e.innerHTML.match(match);
        var doc = document.write;
        document.write = function(p){ e.innerHTML = e.innerHTML.replace(scripts[s],p)};
        if(scripts) {
            for(var s = 0; s < scripts.length; s++) {
                var js = '';
                var match = new RegExp(Reg, 'im');
                js = scripts[s].match(match)[1];
                js = js.replace('<!--','');
                js = js.replace('-->','');
                eval('try{'+js+'}catch(e){}');
            }
        }
        document.write = doc;
    }

更好的解决方案是添加一个可以在更新结束时调用的函数来显示效果。

Answer 3

我建议你不要这样做，这可能会导致安全漏洞如果您已经使用了jquery，请使用它的ajax功能而不是原始功能当ajax请求完成时，执行动画代码（只需将其保留在执行ajax调用的页面上）。

Answer 4

在您的内容HTML（您通过调用获得的内容）中为每个内容页面创建一个通用的javascript函数，每次在母版页上加载内容时都会调用该函数...

函数名称将类似于：loadContentJavascript（）{}

并且此函数负责加载将在onload事件上加载的所有功能。

使用AJAX将HTML插入页面

4 个答案: