$.ajax({
'url': '/url',
'method': 'POST',
'data': {},
'success': function (data) {
// success事件 }
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button onclick="getMsg()">点击</button>
<script>
function getMsg(){
var xhr = new XMLHttpRequest();
xhr.open("GET","beload.txt",ture);
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
console.log("xhr",xhr);
console.log("响应数据",xhr.responseText);
document.body.append(xhr.responseText);
}
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>get请求</title>
</head>
<body>
<button onclick="getMsg()">获取</button>
<!-- 当用户点击按钮 获取beload.txt里面的文字，加入到body -->
<script>
// XML 标签结果数据格式
// Http 网络协议
// Request 请求
// open 打开
// send 发送
// ready准备
// state状态
// change改变
// readystate准备状态
// status 状态码
// response 响应
// Text 文本
function getMsg(){
// 01 创建一个xhr对象
var xhr = new XMLHttpRequest();
// 02 打开一个文件
xhr.open("GET","./beload.txt",true);
// 03 发送数据（数据为空）
xhr.send();
// 04 监听事件 xhr发生变化数据
xhr.onreadystatechange=function(){
//0 - 4个状态 4代表完成
console.log("状态",xhr.readyState);
// status http的状态码200代表成功
if(xhr.readyState==4&&xhr.status==200){
console.log("xhr",xhr);
console.log("响应数据",xhr.responseText);
document.body.append(xhr.responseText)
}
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax-post</title>
</head>
<body>
<button onclick="getMsg()">发送</button>
<script>
function getMsg(){
// 1初始化 xhr
var xhr = new XMLHttpRequest();
// 2.open
xhr.open("POST","https://www.520mg.com/ajax/echo.php",true);
// 3. 设置头信息
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 4. 发送 name age
xhr.send("name=小明&age=18");
// 5. 监听事件变化
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 & xhr.status == 200){
document.body.append(xhr.responseText);
}
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>upload文件</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: #fafafa;
}
.progress{
height: 3px;
width: 100%;
position: relative;
background: #e0e0e0;
}
.progress .after{
content: "";
background: blue;
height: 3px;
width: 50%;
position: absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<input type="file" id="myfile"> <button onclick="up()">上传</button>
<div class="box">
<div class="progress">
<div class="after"></div>
</div>
</div>
<script>
function up(){
// 获取用户选择的文件
var myfile = document.getElementById("myfile").files[0];
// 创建一个表单数据对象
var form = new FormData();
// myfile放入到单数据对象里面
form.append("file",myfile);
// 创建一个xhr对象
var xhr = new XMLHttpRequest();
// 打开
xhr.open("POST","https://www.520mg.com/ajax/file.php");
// 发送数据
xhr.onload = function(){
console.log(xhr);
console.log(xhr.responseText);//返回的文本对象
// 思路 把文本转换js对象 创建一个img标签并设置src 插入到body里面
// 返回字符转换为js对象 名称为data
var data = JSON.parse(xhr.responseText);
if(data.error==0){//如果没有错误
var img = document.createElement("img");
img.src="http://www.520mg.com"+data.pic;
img.width=100;
document.body.append(img);
}else{
alert(data.error);
}
}
xhr.upload.onprogress = function(e){
console.log(Math.round(e.loaded/e.total*100)+"%");
}
xhr.send(form);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>upload文件</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: #fafafa;
}
/* 进度条灰色背景 */
.progress{
height: 3px;
width: 100%;
position: relative;
background: #e0e0e0;
display: none;
}
/* 进度条彩色显示进度 */
.progress .after{
content: "";
background: blue;
height: 3px;
width: 0%;
position: absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<input type="file" id="myfile"> <button onclick="up()">上传</button>
<div class="box">
<div class="progress">
<div class="after"></div>
</div>
</div>
<script>
function up(){
// 获取用户选择的文件
var myfile = document.getElementById("myfile").files[0];
// 创建一个表单数据对象
var form = new FormData();
// myfile放入到单数据对象里面
form.append("file",myfile);
// 创建一个xhr对象
var xhr = new XMLHttpRequest();
// 打开
xhr.open("POST","https://www.520mg.com/ajax/file.php");
// 发送数据
var progress = document.querySelector(".box .progress");
progress.style.display="none";
xhr.onload = function(){
console.log(xhr);
console.log(xhr.responseText);//返回的文本对象
// 思路 把文本转换js对象 创建一个img标签并设置src 插入到body里面
// 返回字符转换为js对象 名称为data
var data = JSON.parse(xhr.responseText);
if(data.error==0){//如果没有错误
// 选择到box
var box = document.querySelector(".box");
// 设置box背景 为上传的图片
box.style.backgroundImage="url(http://www.520mg.com"+data.pic+")";
// 设置背景覆盖整
box.style.backgroundSize="cover";
}else{
alert(data.error);
}
}
xhr.upload.onprogress = function(e){
// 上传进度 loaded 已经上传的大小 total总大小
console.log(Math.round(e.loaded/e.total*100)+"%");
var after = document.querySelector(".box .after");
// 选择到after（高亮显示的进度）
after.style.width=Math.round(e.loaded/e.total*100)+"%";
// 设置他的宽为上传进度
if(e.loaded==e.total){
progress.style.display="none";
// 上传完毕隐藏进度条
}
}
xhr.send(form);
progress.style.display="block";
// 单击上传显示进度条
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery -load方法</title>
</head>
<body>
<button>加载</button>
<div class="box"></div>
<script src="./js/jquery-3.4.1.js"></script>
<script>
$(function(){
// 单击按钮 加载beload.txt;
// 选择按钮$("button") 执行单击事件.click() 加载 beload.txt load()
$("button").click(function(){
$(".box").load("beload.txt");
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery -load方法</title>
</head>
<body>
<button>加载</button>
<div class="box"></div>
<script src="./js/jquery-3.4.1.js"></script>
<script>
$(function(){
// 单击按钮 加载beload.txt;
// 选择按钮$("button") 执行单击事件.click() 加载 beload.txt load()
$("button").click(function(){
$(".box").load("beload.html h1");
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery -$.get方法</title>
</head>
<body>
<button>加载</button>
<div class="box"></div>
<script src="./js/jquery-3.4.1.js"></script>
<script>
$(function(){
$("button").click(function(){
// $.get("./beload.txt",function(res,status,xhr){
// console.log(res,status,xhr);
// $(".box").html(res);
// })
$.get("./belad.txt")
.done(function(res){
console.log(res,"完成done")
})
.fail(function(xhr){
console.log(xhr,"失败fail")
})
.always(function(xhr){
console.log(xhr,"always总是")
})
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery -$.post方法</title>
</head>
<body>
<button>加载</button>
<div class="box"></div>
<script src="./js/jquery-3.4.1.js"></script>
<script>
$(function(){
$("button").click(function(){
$.post(
"https://www.520mg.com/ajax/echo.php",
// {name:"mumu",age:24},
"name=mumu&age=24",
function(res,status,xhr){
$(".box").text(res);
console.log(res,status,xhr)
}
)
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery -$.post方法</title>
</head>
<body>
<button>加载</button>
<div class="box"></div>
<script src="./js/jquery-3.4.1.js"></script>
<script>
$(function(){
$("button").click(function(){
$.post(
"https://www.520mg.com/ajax/echo.php",
"name=mumu&age=24",
)
.then(
function(res){ console.log("done",res);},
function(xhr){ console.log("fail",xhr)}
)
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
</head>
<body>
<h1>爱笑话</h1>
<div class="content">
<div class="item">
<h3>笑话标题</h3>
<p>笑话内容</p>
</div>
</div>
<button class="more">加载</button>
<script src="js/jquery-3.4.1.js"></script>
<script>
$(function(){
// 单击按钮加载笑话数据 放入到content里面
var page = 0;
var lock = true;//锁默认可以通过
$(".more").click(function(){
lock = false; //阻止通过
$.ajax({
url:"https://biger.applinzi.com/duan/list.php?page="+page,
type:"GET",
success:function(res){
var arr = res.result;
console.log(arr);
for(var i=0;i<arr.length;i++){
var str = `<div class="item">
<h3>${arr[i].title}</h3>
<p>${arr[i].summary}</p>
</div>`;
$(".content").append(str);
}
page++;
lock=true; //加载成功后 锁为true
}
})
}).trigger("click");
$(window).scroll(function(){
// 浏览器可视区域的高
var BH = $(window).height();
// 滚动条的高
var ST = $(window).scrollTop();
// 文档的高
var DH = $("html").innerHeight();
if(BH+ST+100>DH){
if(lock){
$(".more").trigger("click");
}
}
})
// 当窗口滚动时候
// 如果滚动条到达最底部
// 执行 $(".more").trigger("click");
// 1. 扩展 如果上一次http请求没有成功 这一次就不会trigger
// 3. http请求比较慢是否可以给加载提示呢 $(document).ajaxStart()
// 4. 数据比较多，能否本地缓存 localStorage
})
</script>
</body>
</html>
网友评论