1.什么是ajax?
使用js技术发送请求的一种方式,特点是异步、局部刷新、传输数据量小
ajax的简单使用
2.ajax的简单使用
1.基于ajax完成两数相加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
</head>
<body>
<input type="text" name="i1">+
<input type="text" name="i2">=
<input type="text" name="i3">
<button id="go1">计算</button>
<script>
$("#go1").click(function () {
$.ajax({
url: "/test1/", {# ajax发送请求的地址 #}
type: "POST", {# ajax发送请求的方式 #}
data: {
{# ajax请求携带的数据 #}
i1: $("[name='i1']").val(),
i2: $("[name='i2']").val()
},
success: function (res) { {# 请求返回的结果 #}
$("[name='i3']").val(res)
}
})
})
</script>
</body>
</html>
2.基于ajax判断用户名是否存在
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" name="user" id="ipt" value="{{ ipt }}"><span id="ret"></span>
<button id="res">注册</button>
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
<script>
$("#res").click(function () {
$.ajax({
url:"/process/",
type:"post",
data:{
user:$("[name='user']").val(),
},
success:function (ret) {
$("#ret").text(ret)
}
})
})
</script>
</body>
</html>
3.基于ajax上传文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="file" name="file">
<button id="btn">上传</button>
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
<script>
$("#btn").click(function () {
var form_obj = new FormData();
form_obj.append("f1", $("[name=file]")[0].files[0]); {# 后端通过f1获取文件对象 #}
$.ajax({
url: "/upload/",
type: "post",
processData: false, {# 不处理数据的编码格式 #}
contentType: false, {# 不处理请求头 #}
data: form_obj,
success: function (ret) {
alert(ret)
}
})
})
</script>
</body>
</html>