jQuery与AJAX
load()方法
load(url [,data] [,callback])
url:地址
data:请求时的参数
callback:无论请求成功或失败时的回调函数，参数有响应文本、状态码、以及xhr实例。
创建公共页面common.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function () {
$("#but1").click(function () {
// 将comment.html加载进id为“resText”的元素里
$("#div1").load("insert1.html");
});
})
</script>
</head>
<body>
<h1>JSp学习</h1>
<hr>
<button id="but1">引入insert1.html</button>
<div id="div1"></div>
</body>
</html>
创建需要被请求的页面insert1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>插入了1</h1>
<p id="p1">insert1.html里的p</p>
</body>
</html>
也可以只请求insert1里的
:
$("#div1").load("insert1.html #p1");
运行结果：
回调函数
$("#resText").load("comment.html", function (responseText, textStatus, XMLHttpRequest) {
alert(responseText); // 请求返回的内容
alert(textStatus); // 请求状态
alert(XMLHttpRequest); // XMLHttpRequest对象
});
<script>
$(function () {
$("#but1").click(function () {
// 将comment.html加载进id为“resText”的元素里
$("#div1").load("insert1.html #p1" ,function (responseText, textStatus, XMLHttpRequest) {
alert("请求内容:"+responseText+" 请求状态："+textStatus+" XMLHttpRequest对象:"+XMLHttpRequest)
});
});
})
</script>
运行结果
.get()与.post()
$.get()
$.get(url [, data] [, callback] [, type])
url:请求地址
data:请求时的参数
callback:请求成功时被调用，将请求结果和状态传递给该方法。
type:服务器返回的类型
创建被请求的页面：insert2.jsp
<%--
Created by IntelliJ IDEA.
Date: 1/11/2021
Time: 下午7:10
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String user = request.getParameter("user");
out.print("<h1>输入的账号是："+user+"</h1>");
%>
创建公共页面common.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function () {
$("#but2").click(function () {
$.get(
"insert2.jsp",//url
{user: encodeURI($("#user").val())},//参数,encodeURI编码
function (data,textStatus) {
$("#div2").html(decodeURI(data));//decodeURI进行解码
$("#div3").text(textStatus);//decodeURI进行解码
}
)
}
);
})
</script>
</head>
<body>
<h1>JSp学习</h1>
<hr>
<button id="but2">请求insert2.jsp</button>
<label>
输入账号：
<input id="user" type="text">
</label>
<!--<div id="div1"></div>-->
<hr>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
运行结果：
JSON数据
$.post()
与.get()用法相同，但含义有所不同
AJAX
- url：链接地址，字符串表示
- data：需发送到服务器的数据，GET与POST都可以，格式为{A: ‘…’, B: ‘…’}
- type：“POST” 或 “GET”，请求类型
- timeout：请求超时时间，单位为毫秒，数值表示
- cache：是否缓存请求结果，bool表示
- contentType：内容类型，默认为"application/x-www-form-urlencoded"
- dataType：服务器响应的数据类型，字符串表示；当填写为json时，回调函数中无需再对数据反序列化为json
- success：请求成功后，服务器回调的函数
- error：请求失败后，服务器回调的函数
- complete：请求完成后调用的函数，无论请求是成功还是失败，都会调用该函数；如果设置了success与error函数，则该函数在它们之后被调用
- async：是否异步处理，bool表示，默认为true；设置该值为false后，JS不会向下执行，而是原地等待服务器返回数据，并完成相应的回调函数后，再向下执行
注意引号
创建需要被请求的页面insert3.jsp
<%--
Created by IntelliJ IDEA.
Date: 1/11/2021
Time: 下午7:36
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String pws = request.getParameter("pws");
out.print("<h1>输入的密码是："+pws+"</h1>");
%>
创建公共页面common.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function () {
$("#but4").click(function () {
$.ajax(
{
type:"get",
url:"insert3.jsp",
data: {pws:decodeURI($("#pws").val())},
success:function (data, textStatus) {
$("#div4").html(decodeURI(data))
},
errors: function (XMLHttpRequest, textStatus, errorThrown) {
$("#div4").text("textStatus:"+textStatus)
}
}
)
})
})
</script>
</head>
<body>
<h1>JSp学习</h1>
<hr>
<button id="but4">AJAX</button>
<label>
输入密码：
<input id="pws" type="text">
</label>
<div id="div4"></div>
</body>
</html>
浙公网安备 33010602011771号