jquery load()方法使用说明

最近网站做一些改动,需要引用另一个网站的页面,于是用到了jQuery框加中的load方法。挺方便的。

load(url, [data], [callback])手册上的说明很直接明了:

载入远程 HTML 文件代码并插入至 DOM 中。默认使用 GET 方式 – 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 “url #some > selector”。

不过因为它传输数据时是用utf-8编码的,所以当调用页面编码不是utf-8的时候,就会出现乱码,而且url后边的筛选器只能是以id开始,如果筛选的内容没有定id的话是很让人抓狂的,希望在以后的版本里会支持更多的筛选器。

加载页面全部内容:

 代码如下 复制代码

$("#html").load("ajax_load.html");

加载页面部分内容:

 代码如下 复制代码

$("#html").load("ajax_load.html #left");

加载页面全部内容,以POST形式发送附加参数,并在成功加载后给出提示:

 代码如下 复制代码

$("#html").load("ajax_load.html", {"sort":"desc"}, function(){
        alert("ajax_load.html load success!");
});

Jquery.load的方法可以一直load下去

 代码如下 复制代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
int i = Integer.parseInt(request.getParameter("i")==null?"0":request.getParameter("i"));
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>用户登录</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="<%=path%>/Scripts/jquery-1.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#h<%= i %>").click(function(){
$("#d<%= i %>").load("<%=basePath%>index.jsp",{i:<%=i+1%>});
});
});
</script>
</head>
<body>
this is index.jsp?i=<%= i %>
<input type="button" value="get<%= i+1 %>" id="h<%= i %>">
<br>
<div id="d<%= i %>" style="border:1px; border-style: solid; margin: 5px;">load index.jsp?i=<%= i+1 %> here!</div>
</body>
</html>

load不缓存方法

1.jQuery提供一个防止ajax使用缓存的方法,

 代码如下 复制代码

<script type="text/javascript" language="javascript">
$.ajaxSetup ({
cache: false //close AJAX cache
});
</script>

这个方法在每次load页面的时候都要执行一次  否则只会再第一次时候有效 其他load 还会读取缓存页面

2. 第二就是修改load 加载的url地址

例如 再url 多加个时间参数就可以 这个方法再wap1.0 中 我也用过避免读取缓存

 

load 中文乱码解决方法

普通的调用方法很简单

 代码如下 复制代码

$("#index_foot_container").load("foot.html");

分析,一般引起load乱码是由于二者页面编码不致影起的,处理方法是

1.我的显示页面index.html的编码是uft-8的;
2.我的静态页面foot.html的编码是uft-8的;

好了总结上面的我们来介绍一个实例文章评论实例

二、相关的页面:(两个页面在同一目录下面)
 1、 Article.aspx 文章详细显示页

HTML页面结构: 
               

 代码如下 复制代码
    <input id="TopicID" type="hidden" value="<%=topicID %>" />
                   <div id="ArticleContent"></div>
                    <div id="LoadArticleReply"></div>

2、ArticleReply.aspx  评论加载页(显示页)

HTML页面结构:一个repeater控件来显示评论内容
在pageload中加载数据,通过 后面的post传递的topicID
 

三、相关代码:

1、Article.aspx 页面加载的时候
第一步:

 代码如下 复制代码

public int topicID;//定义变量;然后在page_Load加载时取到topicID的值,同时要绑定文章
topicID = int.Parse(Request.QueryString["ID"]);//需要经过处理,否则会出现很多问题,这里我仅仅简单的作为演示

第二步:加载文章评论方法:

 代码如下 复制代码
<script type="text/javascript">
    function LoadData() {
        var tid = $("#TopicID").val();
        $("#LoadArticleReply").load("/ArticleReply.aspx", { "ID": tid }, function() {
            $("#LoadArticleReply").fadeIn("slow");
        }
        );
    }
</script>

这个时候我们来看看这个LoadData函数,取当前文章的ID序号,然后根据DIV的id来load评论的地址,文章的ID序号,还有一个显示的方式及速度, 
通过load的url及ID,我们在ArticleReply.aspx  页面就可以去到文章的ID序号,来获取相关评论,然后呈现在ID为LoadArticleReply的DIV中了。
 
第三步:首次加载文章评论:
 
这个时候  Article.aspx初次加载的时候如果绑定文章评论呢??在cs中又如何调用js中的??
当然还是Article.aspx.cs的page_Load中,

 代码如下 复制代码
if (!Page.IsPostBack)  //首次加载文章评论,用脚本执行
                {
                    ClientScript.RegisterStartupScript(ClientScript.GetType(), "myscript", "<script>LoadData();</script>");//题外问题: 这里如果同时跟asp.net2.0中的login控件一起使用的时候会有个小问题,本文结束的时候介绍下
                }

 
第四步:发表评论时,提交评论与加载评论

【提交评论请看本站 jquery ajax 介绍及在asp.net中的使用简单示例  】
  1、提交评论: 
  

 代码如下 复制代码
function SubmitData() {
            var id = $("#TopicID").val();
            var commName = $("#txtNickName").val();
            var commEmail = $("#txtEmail").val();
            var commUrl = $("#txtUrl").val();
            var comment = $("#ArticleComment").val();
            $.ajax({
                cache: "False",
                type: "POST",
                url: "/PostComment.aspx",
                data: "ID=" + id + "&name=" + commName + "&url=" + commUrl + "&email=" + commEmail + "&comment=" + comment,
                success: function(msg) {
                    if (msg == "OK") {
                        alert("发表成功!");
                        //1、这是刷新页面全部数据
                        // window.location.reload(true);
                        //2、这里刷新局部数据
                        LoadData();
                    }
                    else if (msg == "Error") {
                        alert("添加失败!");
                    }
                }
            });
        }
 
时间: 2025-01-06 13:16:20

jquery load()方法使用说明的相关文章

jquery load方法用法详解

格式 load(url,data,function(response,status,xhr)) 如何使用data 1.加载一个php文件,该php文件不含传递参数  代码如下 复制代码 $("#myID").load("test.php"); //在id为#myID的元素里导入test.php运行后的结果2. 加载一个php文件,该php文件含有一个传递参数  代码如下 复制代码 $("#myID").load("test.php&qu

在.jsp文件里面,通过jquery load方法加载另一个.jsp文件,请问这2个.jsp文件是否共享数据呢?

问题描述 1.问题里面的共享数据是指,在.jsp里的脚本代码 定义的变量/对象等举例,<%Cart cart = request.getAttribute("cart");--%>2.再打个比方----包含文件,有2种方法:1).jsp指令<jsp:include page="XXX.jsp"/> //这样包含进来的.jsp文件不共享数据,因为2个.jsp文件 各自独立!2).jsp标准动作<%@ include file="

jQuery load方法用法集锦_jquery

调用load方法的完整格式是:load( url, [data], [callback] ),其中 url:是指要导入文件的地址. data:可选参数:因为Load不仅仅可以导入静态的html文件,还可以导入动态脚本,例如PHP文件,所以要导入的是动态文件时,我们可以把要传递的参数放在这里. callback:可选参数:是指调用load方法并得到服务器响应后,再执行的另外一个函数. 一:如何使用data 1.加载一个php文件,该php文件不含传递参数 $("#myID").load(

jQuery map()方法使用说明

jquery有两个map方法. 一个是主要用来遍历操作数组和对象, 另一个是主要用于遍历jquery对象. 法定义是 jQuery.map( array, callback(elementOfArray, indexInArray) )看来和python的map方法差不多,只是参数顺序不同. python里的map方法是这样定义的 map(function, iterable, ...),可以接收多个迭代对象. 所以我想把之前学习python map的示例用jquery重写下 示例一:  代码如

jquery live()方法使用说明

今天花了很长一段时间在整个人中心的功能,遇到的问题不少,首先是 ajax的跨域问题.接着是jquery绑定的事件不起作用.花了很长一段时间调试加百度,最后,终于解决了,这特意与 jquery的live方法啊.下面是博客园里面的一篇文章,写的很明白. 什么是 .LIVE() .live方法类似于.bind(),除此之外,它允许你将事件绑定到DOM元素上,可以将事件绑定到DOM中还不存在的元素上,看看下面的例子: 比方说当用户在点击链接时及想提示他们正在离开站点.  代码如下 复制代码 $(docu

jQuery load()方法遇到的问题

问题描述 刚打开页面时的效果点击新建按钮后的效果连续点击几次新建后的效果代码里用的是jqueyeasyUI在点击新建后,打开一个window,window加载另一个aspx页面.如果不用load,一切都显示正常,如果一load的话,就成了上面的结果我现在用iframe可以解决问题,但为什么会出现这种结果?我想用load实现,不想用iframe.代码:type的值是一个参数,把.load("wincontent.aspx?type="+type)去掉就正常了,只是没有加载winconte

关于JQuery($.load)事件的用法和分析_jquery

首先我们需要清楚的是jquery load方法是对jQuery.ajax()进行封装以方便我们使用的一个方法,当我们需要处理较为复杂的逻辑时候,还是需要用到jQuery.ajax()这个比较全面的方法的. 调用load方法的完整语法格式:load( url, [data], [callback] )其中:url是指要导入文件的地址.data:可选参数:因为load不仅仅可以导入静态的html文件,还可以导入动态脚本,例如PHP文件,所以要导入的是动态文件时,我们可以把要传递的参数放在这里.cal

jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法

 这篇文章主要介绍了jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法,涉及jQuery中load方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法.分享给大家供大家参考.具体分析如下: jQuery通过load()方法载入另外一个网页文件内的指定标签内容到div标签,如果我们可以加载网页b.html中的id为p1的标签内容到网页a.html的

jquery中load方法的用法及注意事项说明

 本篇文章主要是对jquery中load方法的用法及注意事项进行了详细介绍,需要的朋友可以过来参考下,希望对大家有所帮助 调用load方法的完整格式是:load( url, [data], [callback] ),其中  url:是指要导入文件的地址.  data:可选参数:因为Load不仅仅可以导入静态的html文件,还可以导入动态脚本,例如PHP文件,所以要导入的是动态文件时,我们可以把要传递的参数放在这里.  callback:可选参数:是指调用load方法并得到服务器响应后,再执行的另