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

Question

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

Пример: если пользователь нажимает кнопку «Настройки», функция ajax будет загружаться изНа внешней странице код и будет помещен в div с тегом «settings».

Это код, который я использую для выполнения запроса 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_appearancediv:

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

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

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

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

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');

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 functionallity, а не как raw.
Когда запрос ajax завершится, выполните код анимации (просто оставьте его на странице, которая выполняет вызов ajax).

Answer 4

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

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

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