使用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代码(返回代码中的上传按钮因此而无法工作)并且如果可以应用一些自定义的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-effects使用了一些解决方法.可能还有另一种方法可以帮助我解决这个问题.

Answer 1

如果你使用jQuery ajax函数(或简化的jQuery get函数),并将数据类型设置为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');