我目前正在开发一个网站,我需要根据用户执行的操作来动态加载页面。
示例:如果用户单击“设置”按钮,则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 :
settings_appearance
<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效果,从而使用了一些解决方法。可能还有另一种方法……同样可以帮助我解决这个问题。
如果使用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');