Ajax load html page

jQuery ajax - load() 方法

jQuery Ajax 参考手册

实例

使用 AJAX 请求来改变 div 元素的文本:

$("button").click(function(){
  $("div").load('demo_ajax_load.txt');
});

亲自试一试

您可以在页面底部找到更多 TIY 实例

定义和用法

load() 方法通过 AJAX 请求从服务器加载数据,并把返回的数据放置到指定的元素中。

注释:还存在一个名为 load 的 jQuery 事件方法。调用哪个,取决于参数。

语法
load(url,data,function(response,status,xhr))

参数
描述

url
规定要将请求发送到哪个 URL。

data
可选。规定连同请求发送到服务器的数据。

function(response,status,xhr)

可选。规定当请求完成时运行的函数。

额外的参数:

  • response - 包含来自请求的结果数据
  • status - 包含请求的状态("success", "notmodified", "error", "timeout" 或 "parsererror")
  • xhr - 包含 XMLHttpRequest 对象
详细说明

该方法是最简单的从服务器获取数据的方法。它几乎与 $.get(url, data, success) 等价,不同的是它不是全局函数,并且它拥有隐式的回调函数。当侦测到成功的响应时(比如,当 textStatus 为 "success" 或 "notmodified" 时),.load() 将匹配元素的 HTML 内容设置为返回的数据。这意味着该方法的大多数使用会非常简单:

$("#result").load("ajax/test.html");

如果提供回调函数,则会在执行 post-processing 之后执行该函数:

$("#result").load("ajax/test.html", function() {
  alert("Load was performed.");
});

上面的两个例子中,如果当前文档不包含 "result" ID,则不会执行 .load() 方法。

如果提供的数据是对象,则使用 POST 方法;否则使用 GET 方法。

加载页面片段

.load() 方法,与 $.get() 不同,允许我们规定要插入的远程文档的某个部分。这一点是通过 url 参数的特殊语法实现的。如果该字符串中包含一个或多个空格,紧接第一个空格的字符串则是决定所加载内容的 jQuery 选择器。

我们可以修改上面的例子,这样就可以使用所获得文档的某部分:

$("#result").load("ajax/test.html #container");

如果执行该方法,则会取回 ajax/test.html 的内容,不过然后,jQuery 会解析被返回的文档,来查找带有容器 ID 的元素。该元素,连同其内容,会被插入带有结果 ID 的元素中,所取回文档的其余部分会被丢弃。

jQuery 使用浏览器的 .innerHTML 属性来解析被取回的文档,并把它插入当前文档。在此过程中,浏览器常会从文档中过滤掉元素,比如 <html>, <title> 或 <head> 元素。结果是,由 .load() 取回的元素可能与由浏览器直接取回的文档不完全相同。

注释:由于浏览器安全方面的限制,大多数 "Ajax" 请求遵守同源策略;请求无法从不同的域、子域或协议成功地取回数据。

更多实例
例子 1

加载 feeds.html 文件内容:

$("#feeds").load("feeds.html");
例子 2

与上面的实例类似,但是以 POST 形式发送附加参数并在成功时显示信息:

$("#feeds").load("feeds.php", {limit: 25}, function(){
  alert("The last 25 entries in the feed have been loaded");
});
例子 3

加载文章侧边栏导航部分至一个无序列表:

HTML 代码:

<b>jQuery Links:</b>
<ul id="links"></ul>

jQuery 代码:

$("#links").load("/Main_Page #p-Getting-Started li");

转载于:https://www.cnblogs.com/dufu/p/3964829.html

### 回答1: 实现分页操作一般需要以下步骤: 1. 在 HTML 页面中创建分页控件,包括上一页、下一页、页码等元素。 2. 使用 AJAX 技术向服务器发送分页请求,获取数据。 3. 将获取到的数据显示在页面上,替换原来的数据。 以下是一个简单的 HTML AJAX 分页的实现示例: HTML 代码: ``` <div id="data"></div> <div id="pagination"></div> ``` JavaScript 代码: ``` var currentPage = 1; var totalPage = 10; function loadData(page) { $.ajax({ url: 'data.php', type: 'GET', data: {page: page}, success: function(data) { $('#data').html(data); } }); } function loadPagination() { var html = ''; if (currentPage > 1) { html += '<a href="#" onclick="loadData(' + (currentPage - 1) + ')">上一页</a>'; } for (var i = 1; i <= totalPage; i++) { if (i == currentPage) { html += '<span>' + i + '</span>'; } else { html += '<a href="#" onclick="loadData(' + i + ')">' + i + '</a>'; } } if (currentPage < totalPage) { html += '<a href="#" onclick="loadData(' + (currentPage + 1) + ')">下一页</a>'; } $('#pagination').html(html); } $(document).ready(function() { loadData(currentPage); loadPagination(); }); ``` 在这个示例中,loadData() 函数用于向服务器发送分页请求,并将获取到的数据显示在页面上,loadPagination() 函数用于生成分页控件的 HTML 代码,并将其插入到页面中。在页面加载完成后,通过调用这两个函数来初始化分页操作。 当用户点击分页控件中的上一页、下一页或页码时,会触发相应的 AJAX 请求,重新加载数据并更新分页控件。在服务器端,需要根据请求参数来返回相应的数据,具体实现可以参考后端语言的相关文档。 ### 回答2: HTML是一种标记语言,用于搭建网页结构和内容布局,并使用标签来描述网页的各个部分。AJAX(Asynchronous JavaScript and XML)是一种用于在不刷新整个页面的情况下与服务器进行异步通信的技术。 实现HTML AJAX分页操作可以提供更好的用户体验和网页性能优化。以下是实现步骤: 1. 在HTML中创建一个容器,用于显示分页数据。 2. 使用AJAX技术与服务器进行通信,发送分页请求。可以使用XMLHttpRequest对象或jQuery提供的AJAX方法。 3. 在后台服务器端,接收到分页请求后,根据请求的参数,从数据库中获取对应页数的数据。 4. 将获取到的数据返回给前端,可以使用JSON格式进行数据传输。 5. 在前端,通过AJAX的回调函数获取到服务器返回的数据。 6. 将返回的数据填充到HTML容器中,展示给用户。 7. 根据需求,可以添加上一页和下一页按钮,用于翻页操作。点击按钮时,再次发送对应页数的分页请求。 通过以上步骤,实现了HTML AJAX分页操作。用户可以通过页面上的翻页按钮,切换不同的页数,而无需整页刷新。这样可以减少数据传输量,提高页面加载速度,并提供更良好的用户体验。 ### 回答3: HTMLAJAX结合实现分页操作可以提供更流畅的用户体验和减少页面加载时间。下面我将介绍如何使用HTMLAJAX实现分页操作。 1. 创建HTML页面结构: 在HTML页面中首先创建一个显示数据的容器,可以是一个`<div>`标签或者`<table>`标签。同时,还需要创建一个分页导航栏,通常是一个`<ul>`标签。 2. 使用AJAX发送请求: 在JavaScript中使用AJAX发送异步请求获取分页数据。可以使用`XMLHttpRequest`对象或者`fetch`方法,向服务器端发送请求,同时传递当前页码和每页显示的数据量等参数。 3. 服务器端处理: 服务器端接收到请求后,根据传递的参数进行数据查询,并计算总页数。然后将查询结果以及总页数返回给客户端。 4. 客户端处理: 当客户端收到服务器端返回的数据后,使用JavaScript动态更新页面内容。可以使用DOM操作方法将数据插入到容器中,实现数据的显示。 5. 更新分页导航栏: 同时更新分页导航栏,可以根据总页数动态生成并添加页码按钮,通过点击不同的页码按钮切换显示的数据。 6. 添加事件监听: 为分页导航栏中的每个页码按钮添加点击事件监听器,当按钮被点击时,重新发送AJAX请求获取对应页码的数据,并更新页面内容和当前页码。 通过以上步骤,我们可以实现基于HTMLAJAX的分页操作。这样用户在浏览数据时可以方便地切换到不同的页码,同时也避免了每次切换页面都需要重新加载整个页面的问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值