使用AJAX将HTML插入页面

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_appearancediv 的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代码（由于这个原因，returncode中的upload按钮不起作用），以及是否有可能应用我构建的自定义ui效果与主页。

感谢您的帮助。

PS这是应用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>

PPS
ui效果不适用于Ajax函数返回的html元素（例如输入和按钮）。我在ajax函数返回响应后再次应用ui效果，从而使用了一些解决方法。可能还有另一种方法……同样可以帮助我解决这个问题。

Answer 1

如果使用jQuery ajax函数（或简化的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');