032_jQuery Ajax的load方法

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

2. 语法

$(selector).load(url,data,function(response,textStatus,jqXHR))

3. 参数

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

$('#btn1').click(function(){$("#result").load("test.html"); // 这是一个GET请求
});

5. 加载页面片段

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

$('#btn2').click(function(){$("#result").load("test.html #p1"); // 这是一个GET请求
});

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

$('#btn3').click(function(){$("#result").load("JqueryAjaxLoad.action #p1", "dataType=xml"); // 这是一个GET请求
});
$('#btn4').click(function(){$("#result").load("JqueryAjaxLoad.action", {dataType: "html"}); // 这是一个POST请求
});

7. 例子

7.1. 新建一个名为jQueryAjaxLoad动态WEB工程

7.2. 编写index.html

<!DOCTYPE html>
<html><head><title>jQuery-Ajax的load()方法</title><meta charset="utf-8" /><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("#result").load("test.html"); // 这是一个GET请求});$('#btn2').click(function(){$("#result").load("test.html #p1"); // 这是一个GET请求});$('#btn3').click(function(){$("#result").load("JqueryAjaxLoad.action #p1", "dataType=xml"); // 这是一个GET请求});$('#btn4').click(function(){$("#result").load("JqueryAjaxLoad.action", {dataType: "html"}); // 这是一个POST请求});$('#btn5').click(function(){// 这是一个POST请求$("#result").load("JqueryAjaxLoad.action", {dataType: "html"}, function(response, textStatus, jqXHR){console.log('response=' + response + ', textStatus=' + textStatus);}); });});</script><style type="text/css">div {width: 450px;height: 100px;background-color: pink;}</style></head><body> <div id="result">结果区域</div><br /><button id="btn1">load方法只有url</button> <button id="btn2">load方法只有url加载页面片段</button><button id="btn3">load方法get请求参数</button> <br /><br /><button id="btn4">load方法post请求参数</button> <button id="btn5">load方法回调函数</button></body>
</html>

7.3. 编写test.html

<!DOCTYPE html>
<html><head><title>测试文档</title><meta charset="utf-8" /></head><body> <h2>这是test.html文件中的h2</h2><p id="p1">这是test.html文件中的p</p></body>
</html>

7.4. 编写test.xml

<?xml version="1.0" encoding="UTF-8"?>
<h2>这是test.xml文件中的h2</h2>
<p id="p1">这是test.xml文件中的p</p>

7.5. 编写JqueryAjaxLoad.java

package com.rjbd.jal;import java.io.BufferedReader;
import java.io.FileReader;
import java.io.IOException;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;public class JqueryAjaxLoad extends HttpServlet {private static final long serialVersionUID = 1L;@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String dataType = req.getParameter("dataType");FileReader fr = new FileReader(getServletContext().getRealPath("test." + dataType));BufferedReader br = new BufferedReader(fr);StringBuffer sb = new StringBuffer();String result = null;while((result = br.readLine()) != null) {sb.append(result);}br.close();fr.close();// 响应客户端的内容类型是text/plain 编码是UTF-8(包含字符编码和网页编码)resp.setContentType("text/plain;charset=UTF-8");resp.getWriter().write(sb.toString());}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);}
}

7.6. 修改web.xml

7.8. 运行项目

032_jQuery Ajax的load方法相关推荐

ajax方法怎么用,ajax的使用方法
后台在写代码时一般都会用到AJAX传值的方法了解的AJAX方法有三种样式第一 $.ajax( { type: "POST", url: "UserList.ashx ...
1-jQuery - AJAX load() 方法【基础篇】
jQuery load() 方法是简单但强大的 AJAX 方法:load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 格式 $(selector).load(URL 源码 index.h ...
2-jQuery - AJAX load() 方法【进阶篇】
第一篇的AJAX load() 方法过于简单,补充一下,完整的. 格式 $(selector).load(URL,data,callback); 源码 <!DOCTYPE html> &l ...
ajax的添加方法,jQuery - AJAX load（）方法如何添加2多变量
我有这段代码.我需要添加一个sub_season var.如何添加更多的var?我在谷歌托盘看,但没有结果. 谢谢你,如果你帮我!jQuery - AJAX load()方法如何添加2多变量 echo ...
jsp ajax加载html页面,Ajax中的load()方法实现指定区域加载或刷新html与jsp
一.Jquery中的Ajax Jquery对Ajax操作进行了封装,在Jquery中: 最底层的是$.ajsx(), 第二层是load().$.get().$.post() 第三层是$.getJSON ...
ajax load html页面,jQuery – AJAX load() 方法 | 菜鸟教程
为了避免多页面情形下的代码重复,可以利用 load() 方法,将重复的部分(例如导航栏)放入单独的文件,使用下列方法进行导入: //1.当前文件中要插入的地方使用此结构: //2.***.html中放 ...
23.使用load()方法异步请求数据
使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为: load(url,[data],[callback]) 参数url为加载服务器地址,可选项d ...
使用jQuery实现ajax几种方法
一.$.ajax()可以通过发送HTTP请求加载远程数据,是jQuery最底层Ajax实现. 语法 $.ajax({"url" : "UserServlet", ...
html load方法的区别,jQuery 中的.load()、$get()、$,post()用法和区别
.load()方法是局部方法,因为他需要一个包含元素的jQuery 对象作为前缀.而$.get()和$.post()是全局方法,无须指定某个元素.对于用途而言,.load()适合做静态文件的异步获取, ...

032_jQuery Ajax的load方法

032_jQuery Ajax的load方法相关推荐

最新文章

热门文章