【一】Ajax简介
【1】精髓
精髓：异步提交/局部刷新
【2】发送请求的方式
- 向后端发送请求的方式
- 浏览器地址直接url回车
- GET请求
- 浏览器地址直接url回车
- a标签的 href 属性
- GET请求
- form表单
- GET请求/POST请求
- Ajax
- GET请求/POST请求
【3】简介
Ajax不是新的编程语言，而是一种使用现有标准的新方法(类比装饰器)
Ajax最大的优点就是不重新加载页面的情况下，可以与服务器交换数据并更新部分网页内容
这种特点给用户的感觉就是在不知不觉中完成了请求和响应过程
-
Ajax(Asynchronous JavaScript and XML)是一种用于创建动态网页的编程技术。
- 它通过在网页上进行异步数据传输，实现了在不重新加载整个页面的情况下更新部分页面内容的能力。
-
Ajax的核心技术包括使用JavaScript和XMLHttpRequest对象与服务器进行数据交互，以及利用DOM(Document Object Model)来动态地更新页面。
-
通过使用Ajax，网页可以在后台与服务器进行数据交换，并在不刷新整个页面的情况下，根据服务器返回的数据实时更新页面的某些部分。
-
这种技术带来了很多好处，比如提高了用户体验、减少了网络流量和服务器负载，并使得开发人员能够创建更加交互和动态的网页应用程序。
-
虽然Ajax最初是指Asynchronous JavaScript and XML，但如今已经不仅限于使用XML作为数据传输的格式，而是可以使用各种格式，如JSON(JavaScript Object Notation)。
-
总结起来，Ajax是一种强大的前端开发技术，通过异步数据传输和动态页面更新，提供了更好的用户体验和交互性，广泛应用于现代Web应用程序的开发中。
Ajax的学习按理来说其实还是js代码，应该学习JavaScript的Ajax的写法，就不学习JavaScript版本的，直接学习jQuery版本的，帮我们封装了，如果不封装，js版本的Ajax非常复杂
document.getElementById('d1').innerHTML = xmlhttp.responseText;
document.getElementByClssName('c1').innerHTML = xmlhttp.responseText;
document.getElementById('d1').innerHTML = xmlhttp.responseText;
document.querySelector('#d1 a ').innerHTML = xmlhttp.responseText;
document.querySelector('.c1').innerHTML = xmlhttp.responseText;
document.querySelector('h1').innerHTML = xmlhttp.responseText;【二】Ajax引入
【1】案例
- 页面上有三个 input 框
- 在前面两个框输入数字，点击按钮，朝后端发送Ajax请求
- 在后端计算出结果，再返回给前端动态展示的第三个input框中
- 要求
- 整个过程页面不能刷新，也不许在前端计算
后端
def ab_ajax(request):# if request.is_ajax():if request.method=='POST':'''接收ajax提交过来的数据'''# <QueryDict: {'inp1': ['1'], 'inp2': ['1']}>print(request.POST)# d1 = request.POST.get('inp1') # str# d2 = request.POST.get('inp2') # str# d3 = int(d1) + int(d2)# 序列化import json# json.dumps(d3)user_dict = {"username":"kevin", "password":123}# return HttpResponse(json.dumps(d3))return HttpResponse(json.dumps(user_dict))# return JsonResponse(user_dict)return render(request, 'ab_ajax.html')- html 页面
<script>$(".btn").click(function () {var inp1 = $("#inp1").val();var inp2 = $("#inp2").val();// 把获取到的两个值提交到后端，然后让Python来计算，然后返回$.ajax({url:'', // 默认不写，就是朝当前地址传递type:'post',dataType:'json',data:{inp1:inp1, inp2:inp2},// 回调函数用来接收后端返回的数据success:function (res) {// {"username": "kevin", "password": 123}console.log(res,) // 就是拿后端返回的数据// 反序列化{#res=JSON.stringify()#}// 后端返回的数据别忘了反序列化，但是你的护短别往了序列化{#res=JSON.parse(res)#}console.log(typeof res) // 就是拿后端返回的数据console.log(res.username) // 就是拿后端返回的数据console.log(res.password) // 就是拿后端返回的数据{#$("#inp3").val(res);#}}})})
</script>
