当前位置: 首页 > 面试题库 >

JQuery / AJAX:使用动态内容加载外部DIV

田骁
2023-03-14
问题内容

我需要创建一个页面,该页面将使用Jquery和AJAX从外部页面加载div。

我遇到了一些很好的教程,但是它们都是基于静态内容的,我的链接和内容是由PHP生成的。

我基于我的代码的主要教程来自:http:
//yensdesign.com/2008/12/how-to-load-content-via-ajax-in-
jquery/

我需要的确切功能如下:

  1. 主页包含一个永久div,其中列出了一些包含参数的链接。
  2. 单击后,链接会将参数传递到外部页面。
  3. 外部页面根据参数过滤记录集,并用结果填充div。
  4. 新的div包含一组带有新参数的新链接。
  5. 外部div加载在首页first div下方。
  6. 然后可以重复该html" target="_blank">过程,从而在彼此之间创建一个div链。
  7. 然后,链中的最后一个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(){
        }
    });

}

只需调用此函数即可,而不使用负载。显然,您必须稍微修改一下代码(主要是成功函数中的内容),但这应该为您提供一个良好的起点。



 类似资料:
  • 问题内容: 我的问题: 我有index.html: 是这样的: 问题很简单。 当我按下按钮时,我想动态加载内容,而无需刷新。 提前致谢!请发表评论以进行任何必要的澄清。 编辑,更详细的解释: 我不确定自己是否很清楚(或者我可能不了解我缺乏技术技能的答案),所以我再说一遍。(改写) 我有一个带有提交按钮的HTML,该按钮通过POST方法发送变量。 PHP文件使用此变量,并在经过一定过程后插入并更新M

  • 问题内容: 这种情况: 用户将其zip插入输入字段,然后单击魔术按钮时,他会看到最接近其位置的商店。我称该服务很好,并以一些AJAX优点加载了该服务。一切都很好。 现在,我希望将结果显示在Fancybox中,而不是将结果插入页面上的某处。我根本无法完成这项工作。 JavaScript: 我希望Fancybox弹出并显示URL()中的标记。Fancybox已加载,但不是内容,而是一个字符串,内容为“

  • 问题内容: 我使用jQuery Tools Plugin作为图像滑块(此处为image ),但是由于图像数量巨大,我一次只需要加载几次。由于它是用JavaScript编码的,因此我无法知道滚动位置。我想在最后一张图片出现时立即加载它们。我不知道我放在哪里,事件监听器也什么都没有。 这是我的代码http://jsfiddle.net/PxGTJ/ 请给我一点光! 问题答案: 我只需要使用jQuery

  • 问题内容: 有没有办法做到这一点? page1.php-有 index.php-有 我可以以某种方式从div内部的page1.php中获取数据并将其加载到index.php中的div中吗? 我已经使用css-tricks网址中提供的代码完成了此操作:http : //css- tricks.com/examples/DynamicPage/ 但这使用哈希更改事件。我不想使用哈希功能,而只想使用加载

  • 问题内容: 无论如何,我可以做到这一点,以便在内容加载后(通过Ajax)页面自动滚动到顶部吗? 这是我显示内容的代码: 因此,在“视图区域”加载其内容之后,我可以使页面自动滚动到顶部吗? 问题答案: 只需使用滚动功能 如果您要使用jQuery,那么这里是一个很好的平滑示例:) 从链接: 放入代码中

  • 问题内容: 我有一个-link元素,该元素具有指向页面的href链接,但是我必须使用Ajax从href -url加载该内容,而不是将用户重定向到该页面。如何修改链接以仅从该链接加载内容,以便可以将该内容注入当前页面? 我做了这个,但是没用。 问题答案: 的负载功能并不旨在收集请求响应,该功能用于负载HTML从远程文件并注入到一个DOM元素,例如: 如果处理锚元素的单击事件,则应防止浏览器跟随链接h