`
aswang
  • 浏览: 848845 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

jQuery动态加载html

 
阅读更多

在以往使用jquery的过程中,如果需要动态加载某个信息,一般的处理方法都是通过action去查询信息,然后通过json返回给jsp页面,在页面中使用javascript拼凑出指定的样式,例如表格。这个拼凑的过程是很烦人的,而且特别容易出错,调试也很麻烦。

之所以这么麻烦,完全是因为对jquery不够熟悉,后来了解到jquery有个load方法,可以动态加载某个action的执行结果到指定的html元素,例如div。因此,我就想可以将之前的程序进行改写,在获取信息时,仍然采用传统的方法,即通过struts2的action去获取信息,然后跳转到某个页面显示信息,我们可以在这个页面里面设置样式,其实这个页面就是普通的jsp页面,在里面通过struts2的标签显示数据。然后我们将之前的ajax方法改为load。

示例如下:

如果之前显示动态信息的div 的id为detailInfo

<div id="detailInfo">
</div>

我们现在可以如下写ajax方法:

 

$("#detailInfo").load("<%=request.getContextPath()%>/namespace/action.action?id=${id}");

  这样处理之后,jquery会将action的执行结果显示在detailInfo的div之中。这样既达到了动态获取信息的目标,同时又保持代码的简介,并且可以很轻松的定义样式。

2
3
分享到:
评论
2 楼 aswang 2011-01-28  
jsj05514 写道
但是这么load进来的页面的css效果就么有了,你有没有碰到这中问题啊?!
请指教~~
很着急啊~
谢谢


我没有遇到这种情况啊 ,你看看你用load请求的页面中的样式表路径是否有问题,或者你可以把页面发给我看看!
1 楼 jsj05514 2011-01-25  
但是这么load进来的页面的css效果就么有了,你有没有碰到这中问题啊?!
请指教~~
很着急啊~
谢谢

相关推荐

    jQuery动态添加删除编辑标签代码.zip

    本资源"jQuery动态添加删除编辑标签代码.zip"提供了一种实现动态管理标签页的方法,尤其适用于需要用户交互性高的Web应用。下面将详细阐述这个代码实现的功能及其背后的编程原理。 首先,"jQuery动态添加删除编辑...

    jquery动态添加删除(tr/td)

    在介绍jQuery动态添加删除表格行(tr)和单元格(td)的过程中,首先需要明确的是jQuery库是JavaScript的一个快速、小巧、功能丰富的库,它简化了HTML文档遍历和操作、事件处理、动画和Ajax交互,对于Web开发人员来...

    jquery 动态加载树

    本文将深入探讨如何利用jQuery实现动态加载树这一功能。 首先,我们需要理解"动态加载树"的概念。在网页设计中,树形结构通常用于表示层次关系的数据,如目录结构、组织架构等。动态加载树是指当用户滚动或点击时,...

    jQuery动态加载json数据.docx

    本文将详细介绍如何利用jQuery的AJAX功能,结合HTML5、CSS以及JSON,实现在网页上动态加载数据到表格中的过程。 首先,我们来看项目的整体结构。创建一个名为`study_map`的前端项目,它包括以下几个关键目录: - `...

    jQuery实现图片动态加载效果

    在实现图片动态加载时,我们主要利用jQuery的事件监听和AJAX异步请求功能。 1. **基础结构**:创建一个HTML页面,包含一个用于展示图片的容器,例如`&lt;div id="waterfall"&gt;&lt;/div&gt;`。这个容器可以是瀑布流布局,便于...

    jquery alert 提示框、动态加载提示框、jquery插件

    本文将详细探讨"jQuery Alert提示框"、"动态加载提示框"以及"jQuery插件"的相关知识点。 一、jQuery Alert提示框 在网页开发中,我们常常需要向用户显示一些信息或确认操作,传统的JavaScript alert函数虽然简单,...

    jQuery实现动态添加、删除按钮及input输入框的方法

    通过本篇文章,我们将学习如何使用jQuery实现动态添加和删除按钮及input输入框的方法,同时还将涉及到事件响应和页面元素动态操作的相关技巧。 首先,我们需要注意的是,当页面加载完毕后,jQuery的$(document)....

    jQuery动态添加删除移动列表插件

    总结来说,jQuery动态添加删除移动列表插件通过结合HTML、CSS和JavaScript,提供了用户友好的交互体验,使得用户能够动态地管理列表中的数据。这个插件对于构建数据展示、任务管理或者任何需要动态操作列表的应用...

    使用jQuery加载html页面到指定的div实现方法

    一、jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里。 比如:加载a.html里面的“row”&gt;这个div里面的所有内容加载到b.html的这个div里”content”&gt; 用jquery ajax 可以...

    jQuery为动态生成的select元素添加事件的方法

    在处理动态生成的元素时,jQuery提供了强大的选择器和方法,这使得开发者能够以简洁的方式操作这些元素,包括为它们添加事件监听器。 2. 动态生成元素的事件处理难题:在Web开发中,经常遇到需要动态生成页面元素的...

    jquery动态页面加载进度条

    "jquery动态页面加载进度条"就是一种优化用户体验的工具,它通过在页面加载过程中展示一个直观的进度条,让用户知道页面正在加载并估计加载完成的时间,从而减少用户的等待焦虑感。这个插件基于JavaScript库jQuery...

    jQuery动态添加节点循环流程图表代码.zip

    本资源“jQuery动态添加节点循环流程图表代码”提供了利用jQuery实现动态添加节点并创建循环流程图表的方法。这样的功能在数据可视化、交互式用户界面以及流程展示等方面非常实用。 首先,我们要理解jQuery动态添加...

    jquery动态添加tab内嵌ifream插件

    本篇文章将详细讲解如何利用jQuery实现动态添加Tab并内嵌iFrame插件,以及相关的核心知识点。 首先,我们需要理解Tab组件的基本原理。Tab组件通常用于在有限的空间内展示多个独立但相关的页面内容。用户可以通过...

    jQuery动态的图片加载插件.zip

    jQuery动态图片加载插件是一种广泛应用于网页开发中的技术,它能有效地优化网页性能,提高用户体验。在网页中,特别是含有大量图片的页面,如果一次性加载所有图片,可能会导致页面加载速度慢,用户需要等待较长的...

    JQUERY动态菜单栏添加

    在本教程中,我们将探讨如何利用jQuery来实现动态菜单栏的添加,这对于初级开发者来说是一个很好的学习起点。 首先,我们需要了解jQuery的基本用法。jQuery的核心在于选择器(Selectors),它们用于在DOM(文档对象...

    jquery.lazyload图片预加载效果 jquery预加载

    你可以下载并运行这个示例,观察预加载图片在滚动过程中的动态加载过程,更好地理解其工作原理和使用方法。 总之,jQuery LazyLoad是一个强大的图片预加载工具,通过它我们可以有效地提升网页性能,优化用户体验。...

    Jquery动态按钮

    总结来说,jQuery动态按钮通过结合jQuery库的事件处理能力和CSS的动画效果,可以轻松地为网页中的按钮添加丰富的交互性。这种技术不仅提升了用户体验,也使得开发者能够更高效地实现动态UI元素。在实际开发中,可以...

    jQuery+ajax实现动态添加表格tr td功能示例

    ### jQuery+ajax实现动态添加表格tr td功能 在进行Web开发时,我们经常需要动态地从服务器获取数据,并将这些数据展示在网页上。表格是展示这些数据的一种常见形式。本文将详细解析使用jQuery和ajax技术来实现动态...

    jquery表格动态添加删除行代码.zip

    总的来说,"jquery表格动态添加删除行代码"是一个结合了HTML、CSS和JavaScript(主要是jQuery)的示例,它展示了如何利用这些技术来实现动态交互的表格功能。这样的功能在许多Web应用程序中都有广泛的应用,例如在线...

    jQuery动态添加删除编辑标签代码.rar_forgot3w5_jQuery动态添加删除编辑标签代码_package6rz

    "jQuery动态添加删除编辑标签代码"是一个示例项目,它展示了如何利用jQuery来创建一个功能丰富的选项卡系统,这个系统支持动态添加、删除和编辑标签。下面我们将深入探讨这一主题。 首先,jQuery动态添加标签的功能...

Global site tag (gtag.js) - Google Analytics