前言:材料来自菜鸟教程,侵权立即删除。
1、语法:
$(selector).load(URL,data,callback);
load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
必需的 URL 参数规定您希望加载的 URL
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
2、使用:
这是示例文件("demo_test.txt")的内容:
<h2>jQuery AJAX 是个非常棒的功能!</h2> <p id="p1">这是段落的一些文本。</p>
下面的例子会把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中:
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("/try/ajax/demo_test.txt");
});
});
</script>
二、
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功,则显示"外部内容加载成功!",而如果失败,则显示错误消息:
三、jQuery - AJAX get() 和 post() 方法
GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。
get使用:
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("/try/ajax/demo_test.php",
function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
});
</script>
post使用:
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",{
name:"菜鸟教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});
});
</script>
四、粒子特效实例:
<iframe width="100%" height="300"
src="https://c.runoob.com/iframe/4506"
allowfullscreen="allowfullscreen" frameborder="0">
</iframe>
引用到自己的html,就可以看效果。
五、AJAX 是一种与服务器交换数据的技术,可以在不重新载入整个页面的情况下更新网页的一部分。
方法 | 描述 |
---|---|
$.ajax() | 执行异步 AJAX 请求 |
$.get() | 使用 AJAX 的 HTTP GET 请求从服务器加载数据 |
$.post() | 使用 AJAX 的 HTTP POST 请求从服务器加载数据 |
六、ajax和java后端结合使用:
function a1(){
$.ajax({
//请求将文本输出的值,
url:"${pageContext.request.contextPath}/ajax/a1",
// 发送给服务器,#txtName注意是#
data:{"name":$("#txtName").val()},
// 接受服务器返回的数据
sucess:function (data,status){
alert(data)
alert(status)
}
});
用户名:
<input type="text" id="txtName" onblur="a1()">
注释:注意,这个前端取值的方式,在data中是取值的过程,一个键值对,key的取值,是和后端接口的属性相对应,使用
${#txtName},代表去的是id属性为txtName的值,最重要的是调用了val();函数,否则取不到值,和model存值,在前端取值不一样。
七、用ajax实现登录注册:
java 后端controller层:
@ResponseBody
@RequestMapping("/a3")
public String ajax3(String name,String pwd){
String msg="";
if(name!=null){
if("admin".equals(name)){
msg="ok";
}else{
msg="name is error.";
}
}
if(pwd!=null){
if("123456".equals(pwd)){
msg="ok";
}else{
msg="password is false.";
}
}
return msg;
}
jsp页面:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>登录注册</title>
<script src="${pageContext.request.contextPath}/js/jquery-3.5.1.js"></script>
<script>
function a1(){
$.post({url:"${pageContext.request.contextPath}/ajax/a3",
data:{"name":$("#name").val()},
success:function (data){
if (data.toString()=="ok"){//信息核对成功
$('#userInfo').css("color","green");
}else{
$('#userInfo').css("color","red");
}
$("#userInfo").html(data);
}
})
{
}
}
function a2(){
$.post({
url:"${pageContext.request.contextPath}/ajax/a3",
data:{"pwd":$("#pwd").val()},
success:function (data){
if (data.toString()=="ok"){//信息核对成功
$('#pwdInfo').css("color","green");
}else{
$('#pwdInfo').css("color","red");
}
$("#pwdInfo").html(data);
}
})
}
</script>
</head>
<body>
<p>
用户名:
<input type="text" id="name" onblur="a1()">
<span id="userInfo"></span>
</p>
<p>
密码:
<input type="text" id="pwd" onblur="a2()">
<span id="pwdInfo"></span>
</p>
</body>
</html>