1 什么是ajax:异步的JavaScript和xml,跟后台交互,都用json
2 ajax干啥用的?前后端做数据交互:
3 之前学的跟后台做交互的方式:
-第一种:在浏览器窗口输入地址(get)
-第二种:用form表单提交数据
4 特点:
-异步(异步和同步的区别:同步是请求发过去,要等着回应;异步:不需要等回应,可以进行其他操作)
-局部刷新:
$(".btn").click(function () {
$.ajax({
url:'/index/',
type:'post',
//data:往后台提交的数据
data:{'name':'lqz','age':18},
//成功的时候回调这个函数
success:function (data) {
alert(data)
}
})
5 ajax小实例（例子：1+1=2）
在视图里：
def add(request):
if request.method=='GET':
return render(request,'add.html')
add1=request.POST.get('add1')
add2=request.POST.get('add2')
sum=int(add1)+int(add2)
return HttpResponse(sum)
在html页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="/static/jquery-3.3.1/jquery-3.3.1.js"></script>
<title>Title</title>
</head>
<body>
<p><input type="text" name="add1" id="add1">+<input type="text" name="add2" id="add2">=<input type="text" name="sum" id="sum"></p>
<button class="btn">点我</button>
</body>
<script>
$(".btn").click(function () {
$.ajax({
url:'add',
type:'post',
//$("#add1").val() 取到id为add1这个控件的value值
data:{'add1':$("#add1").val(),'add2':$("#add2").val()},
success:function (data) {
{#alert(data)#}
//赋值
$("#sum").val(data)
{#location.href='/index/'#}
}
})
})
</script>