$(selector).load(URL, data, callback);
<button class = "btn btn-success">AJAX load方法</button>
<div id = "loadText" ></div>
<script type="text/javascript">
function loadFun(){
//loadText显示返回数据的标签DOM
$("#loadText").load("loadText", {data: "请求携带的参数"}, function(responseTxt, statusTxt, xhr){
console.log(responseTxt);
console.log(statusTxt);
console.log(xhr);
})
}
</script>
@RequestMapping(value = "/loadText")
public String loadText(String data) {
System.out.println("前台传递的参数" + data);
return "loadText";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
这是load过去的页面
</body>
</html>
[color=rgb(153, 153, 153) !important]$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
GET 基本上用于从服务器获得(取回)数据。GET 方法可能返回缓存数据。
[color=rgb(153, 153, 153) !important]使用语法 【注意】 使用实例 $.post() 方法通过 HTTP POST 请求从服务器上请求数据。 使用语法 注意】 使用实例$.get(URL, callback);
URL 必填项,请求加载的URL地址。
callback 选填项,$.get()方法执行完后回调方法。
这里偷个懒 O(∩_∩)O哈哈~,页面代码还是用上面的load方法的,把点击按钮的方法改成$.get()方法了。代码如下:<script type="text/javascript">
function loadFun(){
$.get("loadText", function(data, status){
console.log(data);
console.log(status);
})
}
</script>
【注】 $.get()方法只能获取到请求后台返回的数据,不能直接显示在页面上,如果需要显示在页面上还是使用load方法吧(不嫌麻烦可以在回调函数中用JS处理)。其中loadText为请求地址,必填项,第二回调方法,选填。
回调方法中的参数:
data为请求返回的数据
status为请求状态
请求的后台代码和上面load方法的一样,点击按钮后,浏览器控制台输出如下:
3、$.post() 方法
POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。$.post(URL, data, callback);
URL 必填项,请求加载的URL地址。
data 选填项,参数,请求时需要携带的参数,格式键 / 值对集合。
callback 选填项,$.post()方法执行完后回调方法。
这里页面只改了点击按钮的方法,发送请求方法改成$.post()方法了。代码如下:
<script type="text/javascript">
function loadFun(){
$.post("loadText", {data: "请求携带的参数"}, function(data,status){
console.log(data);
console.log(status);
})
}
</script>
不难发现, $.post()方法在参数上和load()方法一样,但回调方法的参数又和 $.get()方法一样,这里就不用在解释了吧!直接来看一下效果吧(左边为浏览器控制台输出,右边为编辑器控制台输出)。
4、ajax() 方法
ajax() 方法通过 HTTP 请求加载远程数据。该方法是 jQuery 底层 AJAX 实现。上面的 $.post()和 $.get()方法底层都是ajax()方法。大多数情况直接使用 $.post()和 $.get()方法简单一些,如果需要操作不常用的选项,使用ajax()方法更灵活,属性设置多一些。
【注】 这里说一下 $.get()和 $.post()方法除了参数外的区别, $.get()方法请求携带的参数一般只能拼接在请求地址后面,安全性不是很高。 $.post()方法请求携带的参数不会显示在地址后面,所以安全性要高一点,一般推荐使用 post方法。
ajax()的简单使用案例
这里页面只改了点击按钮的方法,发送请求方法改成$.ajax()方法了。代码如下:
<script type="text/javascript">
function loadFun(){
$.ajax({
url: "loadText", //请求地址
type: "post", //请求方式,post/get
data: {data: "请求携带的参数"}, //请求携带参数
async: false, //设置请求是同步还是异步,默认为true异步
// 设置返回的数据类型,一般最多的设置为json,这里因为返回的是一个HTML文件,所以设置的为text文本。详细讲解请往下看
dataType:"text",
success: function(data){ //请求成功后的回调函数,data为返回的数据
console.log(data);
}
});
}
</script>
其中请求地址还是上面的请求地址,使用对应的后台方法也就一样了。其中属性这里只设置了部分,下方有ajax方法的全部属性,可以根据项目需求自行添加。下面是控制台输出的效果(左边为浏览器控制台输出,右边为编辑器控制台输出)。
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2