我需要创建一个页面,使用 Jquery 和 AJAX 从外部页面加载 div。
我遇到过一些很好的教程,但它们都是基于静态内容的,我的链接和内容是由 PHP 生成的。
我的代码所基于的主要教程来自:
http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/
我需要的确切功能如下:
- 主页包含一个永久性 div,其中列出了一些包含参数的链接。
- 点击后,链接将参数传递给外部页面。
- 外部页面根据参数过滤记录集并用结果填充 div。
- 新的 div 包含一组带有新参数的新链接。
- 外部 div 在主页第一个 div 下加载。
- 然后可以重复这个过程,在彼此下面创建一个 div 链。
- 然后,链中的最后一个 div 将指向一个新页面,该页面整理了所有以前使用过的查询字符串。
我可以处理所有在主页和外部页面上填充 div 的 PHP 工作。
这是我正在努力解决的 JQuery 和 AJAX 部分。
$(document).ready(function(){
var sections = $('a[id^=link_]'); // Link that passes parameter to external page
var content = $('div[id^=content_]'); // Where external div is loaded to
sections.click(function(){
//load selected section
switch(this.id){
case "div01":
content.load("external.php?param=1 #section_div01");
break;
case "div02":
content.load("external.php?param=2 #section_div02");
break;
}
});
我遇到的问题是让 JQuery 将动态生成的参数传递给外部页面,然后检索新的 div。
我目前只能使用静态链接执行此操作(如上所述)。
最佳答案
我不确定您是否已经解决了这个问题,但我很惊讶没有人提到使用 ajax() 函数。
这将允许您将请求类型定义为 GET:
function loadContent(id) {
$.ajax({
type: "GET",
url: "external.php",
dataType: 'html',
data: {param: id},
success: function(html){
$("#container").html(html);
},
error: function(){
},
complete: function(){
}
});
}
只调用这个函数而不是使用加载。显然,您必须稍微修改一下代码(主要是成功函数中的内容),但这应该会给您一个很好的起点。
关于php - JQuery/AJAX : Loading external DIVs using dynamic content,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/919722/