插入HTML与AJAX页面 [英] Insert HTML into a page with AJAX
问题描述
我目前正在开发一个网站，我需要的页面动态加载基于用户做什么动作。
I am currently developing a website and i need that the pages loads dynamically based on what actions the user does.
例如：如果用户点击按钮设置一个Ajax功能将来自外部的页面加载code和将投入使用标签设置的DIV
Example: If the user clicks on the button 'Settings' an ajax function will load from an external page the code and will put into the div with tag 'settings'.
这是在$ C $词的使用，使Ajax请求：
This is the code i use to make the Ajax request:
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();
}
而这正是阿贾克斯的结果将第一片段放：
And this is where the ajax results will be put by first snippet:
<div id="settings_appearance">
</div>
在code是从功能这里所说的：
The code is called from a function here:
<div class="left_menu_item" id="left_menu_settings_appearance" onclick="show_settings_appearance()">
Appearance
</div>
这是Ajax的功能将投入 settings_appearance DIV的HTML：
And this is the html that the ajax function will put into the 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>
我想知道是否有一种方法，也执行该年代由AJAX功能（在返回code，因为这是行不通的上传按钮）返回的JavaScript code，如果有可能应用一些自定义的UI效果我建的是加载了主页。
I would like to know if there's a way to execute also the javascript code that's returned by the ajax function (upload button in the returncode doesn't work because of this) and if it's possible to apply some customized ui effects i build that are loaded with the main page.
感谢您的帮助。
P.S。这是适用的UI效果的脚本：
P.S. This is the script that applies the UI effects:
<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元素（如输入和按钮）的阿贾克斯函数返回。我用一个小的解决方法应用再次UI效果后，阿贾克斯函数返回的响应。也许有这样做的另一种方式......同样的，这将帮助我解决这个问题。
P.P.S. ui effects are not applied to html elements (such as input and buttons) returned by the Ajax function. I used a little workaround by applying again ui-effects after ajax function returns the response. Probably there's another way of doing it... the same that will help me solve this problem.
推荐答案
如果您使用jQuery的 AJAX功能（或简化的jQuery 获取函数），并设置数据类型为HTML，那么jQuery将评估任何脚本标记的内容包含在结果中。
If you use the jQuery ajax function (or the simplified jQuery get function), and set the datatype to html, then jQuery will evaluate the contents of any script tags included in the results.
您$不用彷徨调用看起来是这样的：
Your $.get call would look something like:
$.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');
这篇关于插入HTML与AJAX页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
