Вставка HTML в страницу с помощью AJAX

В настоящее время я занимаюсь разработкой веб-сайта, и мне нужно, чтобы страницы загружались динамически в зависимости от того, какие действия выполняет пользователь.

Пример. Если пользователь нажимает кнопку "Настройки", функция 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>

И это html, который функция ajax будет помещаться в settings_appearance div:

    <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>

Я хотел бы знать, есть ли способ выполнить также код javascript, возвращаемый функцией ajax (кнопка загрузки в коде возврата не работает из-за этого), и если возможно применить некоторые настроенные ui-эффекты, которые я создаю которые загружаются с главной страницы.

Спасибо за помощь.

P.S. Это script, который применяет эффекты пользовательского интерфейса:

<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 эффекты не применяются к элементам html (таким как вход и кнопки), возвращаемым функцией Ajax. Я использовал небольшое обходное решение, снова применяя ui-эффекты после того, как функция ajax возвращает ответ. Возможно, есть еще один способ сделать это... то же самое, что поможет мне решить эту проблему.

Ответ 1

Если вы используете функцию jQuery ajax (или упрощенный jQuery get function) и установите тип данных в html, тогда jQuery будет оценивать содержимое любых тегов script, включенных в результаты.

Ваш вызов $.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');

Ответ 2

Я также предлагаю, чтобы вы этого не сделали, но после загрузки содержимого в div передайте идентификатор элемента этой функции. Это даже будет обрабатывать 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;
    }

Лучшим решением будет добавить функцию, которую вы можете вызвать в конце обновления, чтобы показать эффекты.

Ответ 3

Я рекомендую вам этого не делать, это может привести к нарушению безопасности.
Если вы уже используете jquery, используйте его ajax functionallity вместо необработанного.
Когда запрос ajax завершает выполнение кода анимации (просто оставьте его на странице, которая выполняет вызов ajax).

Ответ 4

В вашем содержании HTML (тот, который вы получаете от вызова) создает общую функцию javascript для каждой страницы контента, которая будет вызываться каждый раз, когда содержимое загружается на главной странице...

имя функции будет выглядеть примерно так: loadContentJavascript() {}

и эта функция отвечает за загрузку всех функций, которые будут загружаться при событии onload.